Javascript Reactjs动态表单在chnage输入值上获取错误？

我在react.js中创建了一个动态表单，但我无法在输入中键入任何值，因为onchnage函数不起作用，我不知道为什么我尝试了很多次，但我失败了，添加表单和删除表单都正常工作。这里唯一不起作用的输入值是我的代码和代码沙盒链接

import React，{Component}来自“React”；
导入“bootstrap/dist/css/bootstrap.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入字段：[
{
名字：“，
姓氏：“
}
]
};
}
HandLeadFields=（）=>{
常量值=this.state.inputFields；
push（{firstName:，lastName:}）；
这是我的国家({
价值观
});
};
HandlerRemoveFields=索引=>{
常量值=this.state.inputFields；
拼接值（索引1）；
这是我的国家({
价值观
});
};
异步onChange（e，索引）{
如果(
[“firstName”、“lastName”]。包括（例如target.name）
) {
让cats=[…this.state.inputFields]；
cats[index][e.target.name]=e.target.value；
等待这一天({
猫
});
}否则{
this.setState（{[e.target.name]：e.target.value.toUpperCase（）}）；
}
console.log（this.state.inputFields）；
}
handleSubmit=e=>{
e、 预防默认值（）；
log（“inputFields”，this.state.inputFields）；
};
render（）{
返回(
React中的动态表单字段
{this.state.inputFields.map（（inputField，index）=>(
名字
姓
this.handleRemoveFields（索引）}
>
-
this.handleaddields（）}
>
+
))}
拯救


{JSON.stringify（this.state.inputFields，null，2）}
);
}
}
导出默认应用程序；

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

state={
输入字段：{firstName:''，lastName:'}
}
onChange=（e）=>{
常量{name，value}=e.target；
this.setState（prevState=>（{inputFields:{…prevState.inputFields，[name]：value}}））；
}
//在jsx中

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

state={
输入字段：{firstName:''，lastName:'}
}
onChange=（e）=>{
常量{name，value}=e.target；
this.setState（prevState=>（{inputFields:{…prevState.inputFields，[name]：value}}））；
}
//在jsx中

试试这个

onChange={（e）=>{this.onChange（e，index）}}

而不是

onChange={this.onChange.bind（index）}

试试这个

onChange={（e）=>{this.onChange（e，index）}}

而不是

onChange={this.onChange.bind（index）}

1）由于您的inputFields状态是一个数组，您不能只调用

this.state.inputFields.firstName

，更不用说

inputField.firstName

您必须调用

this.state.inputsFields[0].firstName

2） 如果您想要索引和事件，您必须像下面这样传递

onChange

事件：

this.handleChange（事件，索引）}
/>

handleChange=（事件、索引）=>{
console.log（event.currentTarget.value，索引）；
};
//输出：{您键入的任何内容}{表单的索引}
//例如：“你好1”

1）由于您的inputFields状态是一个数组，因此您不能只调用

this.state.inputFields.firstName

，更不用说

inputField.firstName

您必须调用

this.state.inputsFields[0].firstName

2） 如果您想要索引和事件，您必须像下面这样传递

onChange

事件：

this.handleChange（事件，索引）}
/>

handleChange=（事件、索引）=>{
console.log（event.currentTarget.value，索引）；
};
//输出：{您键入的任何内容}{表单的索引}
//例如：“你好1”

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;