Как добавить данные к состоянию объекта в реакции?

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

Вы можете сделать так

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 2

Надеюсь, вам нужно передать 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>
    );
  }
}

Рабочая демонстрация

и не нужно писать отдельные события для аналогичных функций, Проверьтеодин раз, вы можете сделать это, как показано ниже:

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

Надеюсь, это поможет.

Answer 3

Вот так (при условии, что ваша установка поддерживает оператор распространения ...)

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