Question

我创建了this.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。并将其放入对象this.state.data

Answer 1

就像这样（假设您的设置支持扩展操作符...）

handleEmailChange = event => {
    this.setState({ email: event.target.value });
    this.setState(prevState => ({ data: { ...prevState.data, email2: event.target.value } }));
};
handlePasswordChange = event => {
    this.setState({ password: event.target.value });
    this.setState(prevState => ({ data: { ...prevState.data, password2: event.target.value } }));
};

Answer 2

您可以这样做

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.setState(prevState => ({
    data: {
        ...prevState.data,
        [data.email2]: this.state.email
        [data.password2]: this.state.password
    },
   }));

Answer 3

希望您需要将this.state.email and 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>
    );
  }
}

Working demo

并且不需要为类似的功能编写单独的事件，请检查一下演示，您可以按照以下步骤进行操作：

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

希望这会有所帮助。

如何在react中向状态对象添加数据？

3 个答案: