Question

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

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

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

package.json

用户可以添加汽车，并且可以在.NET Core后端正常运行。我有一个来自官方的React Bootstrap 2文档的函数来选择一行。

"last 1 chrome version"

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

这是我的 handleChange方法

<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>

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

单击行时如何填写字段？

我使用的解决方案：

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()

如何使用ReactJS在表格行上单击以填充字段

1 个答案: