Как обработать selectbox в столбцах с данными, используя реагировать - PullRequest
Новая
       22

Как обработать selectbox в столбцах с данными, используя реагировать

0 голосов
/ 28 апреля 2020

Мне нужно использовать поле выбора в datatable для отображения строки и значения, выбранного на панели выбора, но я не знаю, как с этим обращаться,

Я создаю состояние 

this.state = {
    mapping: [] // I am expecting object here like { 'localId' (which is selected row id): '', remoteId: '' }
}

---------------------
in datatable columndefs, I write 

{
    targets: -1,
    orderable: !1,
    createdCell: (td, cellData, rowData, row, col) => {
        return ReactDOM.render(<>
            <div className="form-group" onClick={e => {e.stopPropagation(); }}>
                <select 
                    className="form-control" 
                    onChange={e => {this.changeRemoteMapping(e.target.value, rowData.id)}}
                    onClick={e => {e.stopPropagation(); }}
                    value={this.state.mapping[rowData.id].localData}
                >
                    <option value="">Choose..</option>
                    {
                        this.state.option.map((el) => {
                            return <option key={el.id} value={el.id}>{el.title}</option>;
                        })
                    }
                </select>
            </div>
        </>, td);
    }
}

enter image description here

Ранее я пытался использовать Formik, так как таблицы отображают этот раздел внутри формы formik, но я вижу некоторую ошибку, поэтому решил обработать ее отдельно. Теперь, как я могу управлять? любая помощь.

...