Как заполнить поля одним щелчком мыши по строке таблицы с помощью ReactJS

Question

Я делаю приложение реакции с простой функциональностью CRUD. В моем окружении я использую фреймворк под названием реагирует на загрузку 2.

Ссылка: https://react -bootstrap-table.github.io /act-bootstrap-table2 / docs / Getting-Start.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. У меня есть функция из официальной документации по реакции 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
        })
};

Это все еще не работает, когда я нажимаю на строку.

Как я могу заполнить поля, когда нажимаю на строку?

Решение, которое я использовал:

Как программно заполнить значение поля ввода с помощью 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()