onChange и onSelect не работают для Select внутри al oop в React Hooks - PullRequest
Новая
       3

onChange и onSelect не работают для Select внутри al oop в React Hooks

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

У меня есть сценарий, в котором мне нужно иметь несколько тегов Select внутри циклов, но событие onselect не работает ни для одного из них, пожалуйста, найдите код ниже. заранее спасибо. 

const ThirdStepMap = ({csvFields, profileFileds}) => { // last row, no border-bottom class to be added

const [selectData, setSelectData] = useState('');

console.log('selectData', selectData);
return(
    <div className="modal-body no-pad"> 
    <div className="ap-map-head">
        <div className="row">
            <div className="col p-0">CSV file field</div>
            <div className="col p-0">Airborne fields</div>
        </div>
    </div>
    <div className="ap-map-body">
        {
            csvFields.map(e => {
                return(
                    <div className="row border-bottom">
            <div className="col p-0">
                <div className="form-group static-text d-flex align-items-center">
                    <label for="staticEmail" className=" col-form-label">{e}</label>
                </div>
            </div>
            <div className="col p-0">
                <div className="form-group">
                    <select className="form-control" onChange={(e) => setSelectData(e.target.value)}>
                    {
                        profileFileds.map(r => <option key={r.fieldName} selected={e.toLowerCase().startsWith(r.fieldName.toLowerCase().substr(0,3)) ||  r.fieldName === 'select'} value={r.fieldName}>{r.displayName}</option>)
                    }
                    </select>
                </div>
            </div>
        </div>
                )
            })
        }

    </div>
  </div>
)

}

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Проблема в том, что вы не связываете вызов функции с событием. Для этого вам просто нужно сделать 

<select className="form-control" onSelect={(e) => this.setSelectData.bind(this, e.target.value)}>
0 голосов
/ 28 февраля 2020

В чем конкретно проблема? Ваш оператор console.log () регистрирует правильное значение? Я полагаю, вы просто забыли добавить значение = {selectData} в элементе select.

...