Как установить значение входов с помощью ReactJS хуков? - PullRequest
Новая
       24

Как установить значение входов с помощью ReactJS хуков?

2 голосов
/ 21 апреля 2020

Я хочу заполнить входные значения формы значениями по умолчанию после открытия модального окна

Я сделал это с чистым javascript, используя document.getElementById(textId).value='some value следующим образом: 

  for(var i=0; i<details_data.length;i++){
     let textId='text'+i;
     let amountId='amount'+i;
     document.getElementById(textId).value=details_data[i].text
  }

Это работало нормально. но я хочу знать, как это сделать с React, так как я не верю, что это лучший метод.

я пытался установить входное значение следующим образом: 

<input name='text' id={textId} value={el.text} onChange={details_handler.bind(index)}/>

Но это не позволило мне изменить значение ввода. он просто устанавливает значение по умолчанию, и когда я набираю ввод, значение не изменится так, как я хочу.

Это мой код 

const [details_data,set_details_data]=useState([
    {'text':'','amount':''}
])
// called this function on `onChange` and store the data in `details_data`
function details_handler(e){
    let name=e.target.name;
    let value=e.target.value;
    details_data[this][name]=value;
    set_details_data(details_data);
  }

JSX:

(В моем случае пользователь может добавлять входы сколько угодно, поэтому я помещаю входы в отображение l oop) 

  {
    details_data.map((el,index) => {
        let textId='text'+index;
        let amountId='amount'+index;
        return (
            <div key={index}>
                <input name='text' id={textId} value={el.text} onChange={details_handler.bind(index)}/>
                <input name='amount' id={amountId} onChange={details_handler.bind(index)}/>
            </div>
            );
      })
  }

1 Ответ

3 голосов
/ 21 апреля 2020 
 useEffect(() => {
     if(detailsProps) {
         set_details_data(detailsProps);
     }
 }, [detailsProps])

где ваши detailsProps (данные из API) будут выглядеть примерно так 

 detailsProps = [
    {'text':'text1','amount':'100'},
    {'text':'text2','amount':'200'}
 ]

Функция onChange 

const details_handler = (event, index) => {
   const items = [...details_data];
   items[index][event.target.name] = event.target.value;
   set_details_data(items);
}

ваш вид 

 {
details_data.map((el,index) => {
    return (
        <div key={index}>
            <input name='text' value={el.text} onChange={(e) => details_handler(e, index)}/>
            <input name='amount' value={el.amount} onChange={(e) => details_handler(e, index)}/>
        </div>
        );
  })
}
...