如何使用 ReactJS 通过单击表格行来填充字段

Question

我正在制作一个带有简单 CRUD 功能的反应应用程序。在我的环境中，我使用了一个名为 react bootstrap 2 的框架。

链接：https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html

我有一个表格，用户可以填写信息：

<form id="car-form" onSubmit={this.handleSubmit}>
    <input type="hidden" name="carId" />
    <div className="row">
        <div className="form-group col-sm-3">
            <label>Brand</label>
            <input type="text" className="form-control" placeholder="Enter brand" value={this.state.brand} onChange={this.handleChange} />
        </div>
    </div>
    <div className="row">
        <div className="form-group col-sm-3">
            <label>Model</label>
            <input type="text" className="form-control" placeholder="Enter model" value={this.state.model} onChange={this.handleChange} />
        </div>
    </div>
    <div className="row">
        <div className="form-group col-sm-3">
            <label>Color</label>
            <input type="text" className="form-control" placeholder="Enter color" value={this.state.color} onChange={this.handleChange} />
        </div>
    </div>
    <div className="row">
        <div className="form-group col-sm-3">
            <label>TopSpeed</label>
            <input type="number" className="form-control" placeholder="Enter speed" value={this.state.topSpeed} onChange={this.handleChange} />
        </div>
    </div>
    <div className="btn-group mr-2">
        <button type="submit" className="btn btn-danger mr-1">Save changes</button>
        <button type="reset" className="btn btn-danger mr-1">New record</button>
        <button type="submit" className="btn btn-danger mr-1">Delete record</button>
    </div>
</form>

用户可以添加汽车，这可以与 .NET 核心后端一起正常工作。我有一个来自官方 react bootstrap 2 文档的功能来选择一行。

const rowEvents = {
    onClick: (e, row, rowIndex) => {
        console.log(`clicked on row with index: ${rowIndex}`);
    }
};

当我点击一行时，我得到了正确的索引号。现在，当我单击一行时，我想用 data 填充字段。

这是我的 handleChange 方法

handleChange(event) {
        this.setState({
            brand: event.target.brand,
            model: event.target.model,
            color: event.target.color,
            topspeed: event.target.top
        })
};

当我点击一行时它仍然不起作用。

当我点击一行时如何填写字段？

我使用的解决方案：

How do I programatically fill input field value with React?

Answer 1

假设 this.state.cars 是您存储汽车数据的位置。单击该行将您的功能更改为

const rowEvents = {
    onClick: (e, row, rowIndex) => {
                this.setState({
        brand: this.state.cars[rowIndex].brand,
        model: this.state.cars[rowIndex].model,
        color: this.state.cars[rowIndex].color,
        topspeed: this.state.cars[rowIndex].top
    })
    }
};

并将您的 rowEvents 复制到 render()