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 分配它以便其余数据不受影响。

Answer 1

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

名称必须是您要在状态

中更改的属性的键

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

请检查下面的示例

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

Answer 2

        <form>
              <p> first name </p>
               //when you reference state in class component, should be this.state
              <input type='text' value={this.data.name.fname} onChange={(event) => changeHandler(event, "firstName")} />
              <p> last name </p>
              <input type='text' value={this.data.name.lname} onChange={(event) => changeHandler(event, "lastName")} />
               
               {//so on whole form }
               { and sex and status are select box }

          </form>

这是 changeHandler：

changeHandler = (event, firstOrLast) => {
           if(firstOrLast === "firstName") {
             //you can access onChange event through event.target.value
              this.setState({data{name: {...this.state.data.name, fname: event.target.value,}})}
               }
           else {
                  this.setState(data{{name: {...this.state.data.name, lname: event.target.value}})}
                }

React 中 webForm 的单个 onChange 处理程序

Single onChange handler for webForm in React

onchange

setstate

reactjs