Reactjs动态表单获取错误OnChange输入值？答案

【问题标题】：Reactjs Dynamic Form Getting Error OnChnage input value?Reactjs动态表单获取错误OnChange输入值？
【发布时间】：2020-05-11 06:17:33
【问题描述】：

我在 react.js 中创建了一个动态表单，但我无法在输入中输入任何值，因为 onchnage 函数不起作用我不知道为什么我尝试了很多次但我失败了并添加表单和删除表单工作正常只有输入值在这里不起作用是我的代码和代码框链接https://codesandbox.io/s/reactdynamicform-02cho。

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputFields: [
        {
          firstName: "",
          lastName: ""
        }
      ]
    };

  }

  handleAddFields = () => {
    const values = this.state.inputFields;
    values.push({ firstName: "", lastName: "" });
    this.setState({
      values
    });
  };

  handleRemoveFields = index => {
    const values = this.state.inputFields;
    values.splice(index, 1);
    this.setState({
      values
    });
  };

  async onChange(e, index) {
    if (
      ["firstName","lastName"].includes(e.target.name)
    ) {
    let cats = [...this.state.inputFields];
    cats[index][e.target.name] = e.target.value;
    await this.setState({
      cats
    });
  }else{
    this.setState({ [e.target.name]: e.target.value.toUpperCase() });
  }
    console.log(this.state.inputFields);
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log("inputFields", this.state.inputFields);
  };

  render() {
    return (
      <>
        <h1>Dynamic Form Fields in React</h1>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div className="form-row">
            {this.state.inputFields.map((inputField, index) => (
              <div key={`${inputField}~${index}`}>
                <div className="form-group col-sm-6">
                  <label htmlFor="firstName">First Name</label>
                  <input
                    type="text"
                    className="form-control"
                    id="firstName"
                    name="firstName"
                    value={inputField.firstName}
                    onChange={this.onChange.bind(index)}
                  />
                </div>
                <div className="form-group col-sm-4">
                  <label htmlFor="lastName">Last Name</label>
                  <input
                    type="text"
                    className="form-control"
                    id="lastName"
                    name="lastName"
                    value={inputField.lastName}
                    onChange={this.onChange.bind(index)}
                  />
                </div>
                <div className="form-group col-sm-2">
                  <button
                    className="btn btn-link"
                    type="button"
                    onClick={() => this.handleRemoveFields(index)}
                  >
                    -
                  </button>
                  <button
                    className="btn btn-link"
                    type="button"
                    onClick={() => this.handleAddFields()}
                  >
                    +
                  </button>
                </div>
              </div>
            ))}
          </div>
          <div className="submit-button">
            <button
              className="btn btn-primary mr-2"
              type="submit"
              // onSubmit={this.handleSubmit}
            >
              Save
            </button>
          </div>
          <br />
          <pre>{JSON.stringify(this.state.inputFields, null, 2)}</pre>
        </form>
      </>
    );
  }
}

export default App;

【问题讨论】：

标签： javascript reactjs forms dynamic

【解决方案1】：

你的方法不正确。使用对象来包含表单值

state = { 
    inputFields: { firstName: '', lastName: '' }
}


onChange = (e) => {
   const { name, value } = e.target;
   
   this.setState(prevState => ({ inputFields: { ...prevState.inputFields, [name]: value } }));
}


// in jsx

<input name="firstName" onChange={this.onChange} />

【讨论】：

【解决方案2】：

试试这个 onChange={(e)=>{this.onChange(e, index)}}

而不是

onChange={this.onChange.bind(index)}

【讨论】：

【解决方案3】：

1) 由于您的 inputFields 状态是一个数组，因此您不能只调用this.state.inputFields.firstName，更不能调用inputField.firstName。

您必须致电this.state.inputsFields[0].firstName。

2) 如果你想要索引 AND 事件，你必须像这样传递onChange 事件：

<input
  type="text"
  className="form-control"
  id="lastName"
  name="lastName"
  onChange={event => this.handleChange(event, index)}
/>

  handleChange = (event, index) => {
    console.log(event.currentTarget.value, index);
  };
// output : {whatever you type} {index of the form}
// exemple : "hello 1"

【讨论】：