Javascript 获取React中所有输入参数的值

我正在创建一个允许用户创建自定义输入组件的webapp。这是MUI Select和TEXT字段的形式：

const CTextField = (
  <TextField id="outlined-basic" variant="outlined" size="small" />
);

const CSelect = function(match) {
  match = match.substring(1, match.length - 1);
  const matches = match.split("/");
  let menus = [];
  matches.forEach(single => {
    menus.push(<MenuItem value={single}>{single}</MenuItem>);
  });
  return (
    <FormControl>
      <Select>{menus}</Select>
    </FormControl>
  );
};

const CTextField=(
);
const CSelect=函数（匹配）{
match=match.substring（1，match.length-1）；
const matches=match.split（“/”）；
让菜单=[]；
matches.forEach（单个=>{
菜单。推送（{single}）；
});
返回(
{菜单}
);
};

我遇到的问题是，如何获取从组件中放置或选择的所有值。它们是由最终用户创建的，因此可以有任意数量的它们，我正试图用纯文本将其保持有序

---

我认为有效的方法是简单地获取原始数据，包括html并将其剥离，然后获取值。但是因为我希望这是动态的，所以文本越大，速度就越慢。是否有一种有效的方法来获取所有原始文本以及输入组件的值？

您应该使用

useState

存储输入值，并使用

onChange

函数设置用户输入时的状态

const Hello = () => {

const[values, setValues] = useState({
                              input1: '',
                              input2: ''
                             });

const changeHandler = () => {
    setValues(
      ...values,
      [event.target.name]: event.target.value
     );
}



 return (
           <>
                <input type="text" value={values.input1} name="input1" onChange={changeHandler} />
                <input type="text" value={values.input2} name="input2" onChange={changeHandler} />
            </>
        );


}

const Hello=（）=>{
const[values，setValues]=useState({
输入1:“”，
输入2:“”
});
常量changeHandler=（）=>{
设定值(
价值观
[event.target.name]：event.target.value
);
}
返回(
);
}

不要担心您有多少个元素-这就是为什么有

数组的原因：


const{useState}=React
常量应用=（道具）=>{
常量[inputFieldsList，setInputFieldsList]=useState（[]）；
返回(
输入字段列表：
{
const newVal=[…inputFieldsList'，]
setInputFieldsList（新值）
}}>添加输入字段
{inputFieldsList.map（（项目，i）=>(
{
const newList=[…inputFieldsList]
newList[i]=e.target.value
setInputFieldsList（新列表）
console.log（inputFieldsList）
}}
/>
))}
);
}
const rootElement=document.getElementById（'app'）
ReactDOM.render（，rootElement）
问题在于没有设定数量的输入，是否有办法在单个状态下跟踪所有输入？