Question

这可能是一个愚蠢的问题，所以我先向您道歉。

我有一个小数组，在其中用this.state.data.map()进行迭代并将数据传递到输入中。我想编辑每个输入中的数据并保存新数据。由于它是一个数组，如何将新数据保存到数组中？哪个是最佳/最聪明的做法？

下面是一个示例：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: ["Saab", "Volvo", "BMW"],
      editMode: false
    };
  }

  handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(name);
    console.log(value);

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [name]: value
      }
    }));
  };

  handleFormSubmit = e => {
    e.preventDefault();

    const { data } = this.state;
    console.log(data);
  };

  render() {
    return (
      <div className="App">
        <div>
          {!this.state.editMode ? (
            <button onClick={() => this.setState({ editMode: true })}>
              edit
            </button>
          ) : (
            <div>
              <button onClick={() => this.setState({ editMode: false })}>
                cancel
              </button>
              <button onClick={this.handleFormSubmit}>submit</button>
            </div>
          )}
        </div>

        <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <input
                  onChange={this.handleInput}
                  type="text"
                  placeholder="Cars"
                  name={rule}
                  defaultValue={rule}
                  key={index}
                />
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>
      </div>
    );
  }
}

谢谢！：）

Answer 1

一种解决方案是将当前更改的项目的index传递给事件处理程序，以确保您正在修改列表中的正确项目。

为此，请更改您的handleInput以接受event对象和当前更改的项目的index。

handleInput = (e, index) => {
  const { data = [] } = this.state;
  let value = e.target.value;
  data[index] = value;
  this.setState({ data: data });
};

因此，您必须将输入onChange处理程序更改为此。

onChange={(event) => this.handleInput(event, index)}

请参见enter image description here

Answer 2

第一个问题是，您的data是一个数组，而在handleInput中，您将其分配给object。

第二，谈到您的问题，我认为数组的顺序也很重要。您应该在onchange上设置与上一个相同的新值。值是。

以下代码应该起作用：

handleInput = (value, index) => {
  this.setState(prevState => {
    const newData = prevState.data;
    newData[index] = value;
    return {
        data: newData
    };
  });
};

input element如下：

<input
  onChange={(e) => {this.handleInput(e.target.value, index)}
  type="text"
  placeholder="Cars"
  value={rule}
  key={index}
/>

Answer 3

这样做

handleInput = e => {
  let value = e.target.value;
  let name = [e.target.name];
  console.log(name);
  console.log(value);

   let { data } = this.state;
   data[name]  = value;

    this.setState({data: data});
 };

setState将新数据放入数组

3 个答案: