React中用于webForm的单个onChange处理程序

问题描述

dd(auth()->validate(['username'=>'testtest','password'=>'testtest']));

我有完整的输入表单，像这样...

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

我该如何管理[even.target.name]以及如何使用setState进行分配，以便其余数据不会受到影响。

解决方法

首先，您需要为每个输入命名，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>
    );
  }
}

,

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