Javascript 如何将数据添加到react中的状态对象？

我创建了

这个.state.data

对象。现在我需要将

this.state.email

和this.state.password放入

this.state.data.email2

和

this.state.data.password2

我想创建本地存储。为此，我需要一个可以存储数据的对象

this.state.email

和

this.state.password

是输入

class Register extends Component {
  constructor(props){
    super(props);

    this.state = {
      email: '',
      password: '',
      data: {
        email2: '',
        password2: '',
      },
    }

    // This binding is necessary to make `this` work in the callback 
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleEmailChange = (event) => {
    this.setState({email: event.target.value});
  }
  handlePasswordChange = (event) => {
    this.setState({password: event.target.value});
  }

  handleSubmit = (event) => {
    event.preventDefault();

    console.log(this.state.email);
    console.log(this.state.password);

    /*
    Take values from input, ant put it into this state data array
    */

  // Reset form;
    this.setState({
      email: '',
      password: '',
    })
  }

当我激活

handleSubmit

方法时，我希望使用

this.state.email

和

this.state.password

。并将其放入object

this.state.data

中，如下所示（假设您的设置支持spread运算符

…

）

你可以这样做

handleSubmit = (event) => {
    event.preventDefault();

    console.log(this.state.email);
    console.log(this.state.password);

    const {data} = this.state;
    data.email2 = this.state.email;
    data.password2 = this.state.password;
    this.setState({ data  });

// Reset form;
    this.setState({
    email: '',
    password: '',
    })
}

或者不改变状态（良好实践）

---

希望您需要将

this.state.email和this.state.password

传递到

this.state.data

您可以在

handleEmailChange

和

handlePasswordChange

本身以及您的使用箭头函数中执行此操作，因此不需要在构造函数中绑定此函数

检查下面的代码：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      data: {
        email2: '',
        password2: '',
      },
    }
  }
   handleEmailChange = (event) => {
    this.setState({ 
      email: event.target.value,
      data: {
        ...this.state.data,
        email2: event.target.value,
      }  
    });
  }
  handlePasswordChange = (event) => {
    this.setState({
      password: event.target.value,
      data: {
        ...this.state.data,
        password2: event.target.value,
      } 
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();

    console.log(this.state.email);
    console.log(this.state.password);
    console.log('object data');
     console.log(this.state.data);

    /*
    Take values from input, ant put it into this state data array
    */

  // Reset form;
    this.setState({
      email: '',
      password: '',
    }, () => console.log(this.state))
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleEmailChange} value={this.state.email} />
        <br/><br/>
        <input type="text" onChange={this.handlePasswordChange} value={this.state.password} />
        <br/><br/>
        <button type="button" onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

---

希望这能有所帮助。

将它们存储到数据对象时会遇到什么问题？//此绑定对于使

此

在回调中工作是必要的。“您不需要绑定这些箭头函数。我不确定如何绑定。在handleEmailChange中，我无法将此.setState（{data.email2}）放入。请尝试另一种解决方案，因为最好不要改变状态

this.setState(prevState => ({
    data: {
        ...prevState.data,
        [data.email2]: this.state.email
        [data.password2]: this.state.password
    },
   }));

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      data: {
        email2: '',
        password2: '',
      },
    }
  }
   handleEmailChange = (event) => {
    this.setState({ 
      email: event.target.value,
      data: {
        ...this.state.data,
        email2: event.target.value,
      }  
    });
  }
  handlePasswordChange = (event) => {
    this.setState({
      password: event.target.value,
      data: {
        ...this.state.data,
        password2: event.target.value,
      } 
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();

    console.log(this.state.email);
    console.log(this.state.password);
    console.log('object data');
     console.log(this.state.data);

    /*
    Take values from input, ant put it into this state data array
    */

  // Reset form;
    this.setState({
      email: '',
      password: '',
    }, () => console.log(this.state))
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleEmailChange} value={this.state.email} />
        <br/><br/>
        <input type="text" onChange={this.handlePasswordChange} value={this.state.password} />
        <br/><br/>
        <button type="button" onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

<input type="text" data-field = "email" onChange={this.handleChange} value={this.state.email} />
<input type="text"  data-field = "password" onChange={this.handleChange} value={this.state.password} />

handleChange = (event) => {
    this.setState({ 
     [event.target.getAttribute('data-field')]: event.target.value,
      data: {
        ...this.state.data,
        [`${event.target.getAttribute('data-field')}2`]: event.target.value,
      }  
    });
  }