javascript - 将每个输入的数据存储在各自的状态中

Question

我有三个输入，我希望每个输入的数据都存储在一个状态中。例如，name 输入应该存储在 name 状态中，因为稍后我需要它来将三个状态的值推送到 firebase 数据库中。

我使用 onChange 函数来存储数据，但我不知道如何使每个输入的功能与我想要放入的状态相关。

import React from "react";
import ReactDOM from "react-dom";

export default class Inputs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      age: ""
    };
  }

  handleChange = e => {
    this.setState({ name: e.target.value });
  };

  render() {
    return (
      <div>
        <form>
          <label>
            name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>

          <label>
            email:
            <input type="text" name="email" onChange={this.handleChange} />
          </label>
          <label>
            age:
            <input type="text" name="age" onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <textarea value={this.state.value} onChange={this.handleChange} />
        <button onClick={() => this.props.onClick(this.state.value)}>
          Add task
        </button>
      </div>
    );
  }
}

Answer 1

getChanges = (e) => {
    console.log(e);
    this.setState({[e.target.name]: e.target.value}, function () {
        console.log(this.state)
    })
};

调用这个函数，

<Input onChange={(e) => this.getChanges(e)} name={'name'}
                                    value={this.state.name} placeholder={'Name'}/>