时间戳

首页 > 解决方案 > 如何从动态创建的文本字段中收集值？

javascript - 如何从动态创建的文本字段中收集值？

问题描述

我正在构建一个反应应用程序，并根据一组不断变化的变量为输入动态构建文本字段。我如何收集每个字段的值输入，因为它不是硬编码的？

  const [elementVariables, setElementVariables] = useState([]);
  const [dataCollect, setDataCollect] = useState([]);

  const handleVariableChange = (e) => {
     console.log('variable value: ', e.target.value)
     setDataCollect(e.target.value);
  }

  <div>
    <Divider />
    {elementVariables.map((item) => (
      <TextField
        key={item}
        label={item}
        className={props.classes.textField}
        value={dataCollect}
        onChange={e => handleVariableChange(e)}
      />
    ))}
  </div>

标签： javascriptreactjs

解决方案

我正在使用 map 提供的 index 参数执行此操作，但您也可以在 item 对象中使用具有唯一值的某些属性，即“id”属性。根据索引键更新答案以具有正确的 value 属性。

const [elementVariables, setElementVariables] = useState([]);
  const [dataCollect, setDataCollect] = useState({}); //use an object.

  const handleVariableChange = (e,index) => {
     console.log('variable value: ', e.target.value)
     setDataCollect((dataCollect)=>({...dataCollect,[index]:e.target.value})); 
     /* will result in an object with keys representing text fields 
        {0:'value 1',1:'value2'}
         }
     */

  <div>
    <Divider />
    {elementVariables.map((item,index) => (
      <TextField
        key={item}
        label={item}
        className={props.classes.textField}
        value={dataCollect[index]?dataCollect[index]:''}
        onChange={e => handleVariableChange(e,index)}
      />
    ))}
  </div>

推荐阅读