时间戳

首页 > 解决方案 > 如何在反应中向状态对象添加数据？

javascript - 如何在反应中向状态对象添加数据？

问题描述

我创建了this.state.data对象。现在我需要将this.state.emailand this.state.password 放入this.state.data.email2andthis.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. 并将其放入对象this.state.data

标签： javascriptreactjsobjectecmascript-6

解决方案

希望你需要传递this.state.email and this.state.password给this.state.data

您可以自行执行此操作handleEmailChange，handlePasswordChange也可以使用箭头函数，因此不需要在构造函数中绑定 this。

检查下面的代码：

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

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

希望这可以帮助。

推荐阅读