Reactjs Dynami c Ошибка при получении формы OnChnage входное значение?

Question

Я создал динамическую c форму в реагировании. js, но я не могу ничего ввести в качестве входного значения, потому что функция onchnage не работает. Я не знаю, почему я пытался много раз, но у меня не получается и добавление формы и удаление формы работает хорошо, только не введено значение ввода, вот мой код и ссылка для кодов и ящиков https://codesandbox.io/s/reactdynamicform-02cho.

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

); }} экспортировать приложение по умолчанию;

Answer 1

попробуйте onChange={(e)=>{this.onChange(e, index)}}

вместо

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

Answer 2

Вы подходите не правильно. Использовать объект для хранения значений формы

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} />

Answer 3

1) Поскольку ваше состояние inputFields является массивом, вы не можете просто вызвать this.state.inputFields.firstName и даже меньше inputField.firstName.

Вы должны позвонить this.state.inputsFields[0].firstName.

2) Если вы хотите индекс И событие, вы должны пройти событие 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"