reactjs - React 中 webForm 的单个 onChange 处理程序

Question

this.state = {
 data : { 
            name : {fname : 'sinni' , lname : 'jain' },
            address : { city : 'jodhpur' , state : 'rajasthan'}
            sex : 'male'
        }
  status : 'idiot'    
}


in render fuction...

render ()
{ 
     const { data , status } = this.state;

    return (
              <form>
                  <p> first name </p>
                  <input type='text' value={data.name.fname} onChange={changeHandler} />
                  <p> last name </p>
                  <input type='text' value={data.name.lname} onChange={changeHandler} />
                   
                   {//so on whole form }
                   { and sex and status are select box }

              </form>
           


   )
}
enter code here

我有这样的输入条目的整个表格......

如何创建 onChangeHandler 函数以便可以更新所有值。

我如何管理 [even.target.name] 以及如何使用 setState 分配它，这样其余数据就不会受到影响。

标签： reactjsonchangesetstate

Answer 1

首先，您需要为每个输入命名，data-parent如果它是嵌套属性

名称必须是您要更改状态的属性的键

和data-parentattr，这将是嵌套组件的名称

请检查下面的示例

https://codesandbox.io/s/react-input-example-forked-tu7hp?file=/src/index.js

class MyComponent extends React.Component {
  state = {
    data: {
      name: { fname: "sinni", lname: "jain" },
      address: { city: "jodhpur", state: "rajasthan" },
      sex: "male"
    }
  };

  changeHandler = (e) => {
    const parent = e.target.dataset.parent;
    const name = e.target.name;
    const newValue = e.target.value;
    this.setState((prevState) => {
      if (parent) {
        return {
          data: {
            ...prevState.data,
            [parent]: {
              ...prevState.data[parent],
              [name]: newValue
            }
          }
        };
      } else {
        return {
          data: {
            ...prevState.data,
            [name]: newValue
          }
        };
      }
    });
  };

  render() {
    const { data } = this.state;
    return (
      <div>
        <input
          type="text"
          name="fname"
          data-parent="name"
          value={this.state.data.name.fname}
          onChange={this.changeHandler}
        />
        <input
          type="text"
          name="lname"
          data-parent="name"
          value={this.state.data.name.lname}
          onChange={this.changeHandler}
        />
        <input
          type="text"
          name="city"
          data-parent="address"
          value={this.state.data.address.city}
          onChange={this.changeHandler}
        />
      </div>
    );
  }
}