如何将HTML input标签的用户输入存储到React JS的state数组中

修改方案 #

你之前报错是因为提交事件的target是提交按钮，本身没有value属性，没法直接拿到所有输入框的内容。需要先在子组件收集表单输入，再传递给父组件更新状态，两步修改如下：

1. 修改 generalinfo.jsx

给每个输入框添加name属性和输入监听，把表单值存在子组件本地状态，提交时把数据传给父组件的回调：

import { Component } from "react";

class GeneralInfo extends Component {
  // 子组件本地状态存表单输入
  state = {
    email: "",
    name: "",
    contactNumber: "",
  };

  // 统一处理输入变化，根据input的name属性匹配更新对应字段
  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  // 拦截表单提交，把本地表单数据传给父组件
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.onGeneralSubmit(this.state);
    // 提交后可以清空表单
    this.setState({
      email: "",
      name: "",
      contactNumber: "",
    });
  };

  render() {
    const { onGeneralEdit } = this.props;
    const { email, name, contactNumber } = this.state;

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group m-4">
            <label htmlFor="InputEmail1">Email address</label>
            <input
              type="email"
              className="form-control"
              id="InputEmail1"
              name="email"
              value={email}
              onChange={this.handleInputChange}
              aria-describedby="emailHelp"
              placeholder="Enter email"
            />
            <small id="emailHelp" className="form-text text-muted">
              We'll never share your email with anyone else.
            </small>
          </div>
          <div className="form-group m-4">
            <label htmlFor="inputName">Name :</label>
            <input
              type="text"
              className="form-control"
              id="inputName"
              name="name"
              value={name}
              onChange={this.handleInputChange}
              placeholder="Full Name"
            />
          </div>
          <div className="form-group m-4">
            <label htmlFor="inputContactNumber">Phone Number :</label>
            <input
              type="text"
              className="form-control"
              id="inputContactNumber"
              name="contactNumber"
              value={contactNumber}
              onChange={this.handleInputChange}
              placeholder="Contact Number"
            />
          </div>
          <button
            type="submit"
            className="btn btn-primary m-4"
          >
            Submit
          </button>
          <button
            onClick={onGeneralEdit}
            type="button"
            className="btn btn-warning m-4 "
            //disabled={this.props.generalInfo.length === 0 ? "disabled" : " "}
          >
            Edit
          </button>
        </form>
      </div>
    );
  }
}

export default GeneralInfo;

注意把编辑按钮的type改为button，否则点击也会触发表单提交事件。

2. 修改 App.js 的 handleGeneralSubmit 方法

接收子组件传递的表单数据，更新父组件的state数组：

import { Component } from "react";
import GeneralInfo from "./generalinfo";

class App extends Component {
  state = {
    generalInfo: [
      {
        email : "",
        name: "",
        contactNumber: "",
      }
    ],
  }

  handleGeneralSubmit = (formData) => {
    // 如果是要新增一条数据到数组，用展开运算符生成新数组更新state
    this.setState(prevState => ({
      generalInfo: [...prevState.generalInfo, formData]
    }))
    
    // 如果是要覆盖数组里已有的第一条数据，用下面的写法
    // this.setState(prevState => ({
    //   generalInfo: [formData]
    // }))
  }

  handleGeneralEdit = () => {
    // 编辑逻辑可自行补充
  }


 render() { 
    return ( 
      <div>
        <GeneralInfo onGeneralSubmit={this.handleGeneralSubmit} onGeneralEdit={this.handleGeneralEdit} />
        {/* 可以加这段测试存储的结果 */}
        <div className="m-4">
          <h3>已存储的信息：</h3>
          {this.state.generalInfo.map((item, index) => (
            <div key={index}>
              <p>邮箱：{item.email}</p>
              <p>姓名：{item.name}</p>
              <p>联系电话：{item.contactNumber}</p>
              <hr />
            </div>
          ))}
        </div>
      </div>
     );
  }
}
 
export default App;

内容的提问来源于stack exchange，提问作者Aravinda KS