如何根据文本字段输入动态填充状态?

时间:2020-06-16 12:18:31

标签: javascript reactjs

我有一个使用称为模型的JavaScript对象和一个接受输入的文本字段呈现的表单。基于此,需要更新状态。

不幸的是,状态已更新为最后一个输入项。并非所有表单中的值都已填写。

我没有设法使这里提到的方法对我有用:How to fill a specific state with a dynamic key?

constructor(props) {
    super(props); 
    this.state = {
       Form:{},
    }
}

 onChange = (e, key, type) => {

    let list = [];

    if (type === "text") {
      list[key] =  e.target.value;
    } 

    else {
      // LOGIC TO HANDLE NON TEXT VALUES
      let found = this.state.Form[key]? true : false;
      if (found) {  
        list[key] = false;
        } else {
          list[key]= true;
        }
    }

    this.setState({ Form: list });

  };

renderform = () => {
  return model.map(m => {

     <TextField
          type={m.type}
          key={m.key}
          onChange={event => { this.onChange(event, m.key, "text"); }}
        />

  })
}



1 个答案:

答案 0 :(得分:1)

尝试一下:

array(
    "Maria.php"  => "Ioana.php",
    "Ioana.php"  => "Maria.php"
)

因为当您使用this.setState(prevState => ({ Form: {...prevState.Form, ...list} })); 时,您的this.setState({ Form: list });状态每次都会被新数组覆盖。