如何使用ReactJS hooks设置输入的值？

Question

如何使用ReactJS hooks设置输入的值？

3

我希望在打开模态框时，用默认值填充表单的输入值。

我使用纯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：

（在我的情况下，用户可以添加任意数量的输入框，因此我将这些输入框放在了映射循环中）

  {
    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>
            );
      })
  }

- Ali Al Amine

你的模态框接收了哪些属性？它是否具有多个文本和数量。 - Karthik

@karrthik，这里没有props，值是从API请求中获取的。是的，用户可能会添加新的输入。但是假设我只有这些输入，因为输入数量并不重要，如果您能帮忙处理这些示例，我可以将该概念应用于不同的场景。 - Ali Al Amine

已发布答案，请查看。 - Karthik

请告诉我这是否有帮助。 - Karthik

@Karrthik 值已正确设置，但无法更改。当我在输入框中输入时，什么也没有发生，只是保留来自响应的值。 - Ali Al Amine

更新答案，说明您的输入和更改应该如何进行。 - Karthik

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karthik · Accepted Answer

 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>
        );
  })
}