javascript - 如何更新由 REACTJS 中的数组映射呈现的输入文本

Question

const data = [
  {
    title: "Hello World",
    company: [
      "Google",
      "Apple",
      "Facebook"
    ]
  }
];

class App extends React.Component {
  render() {
    return (
      <ul>
        {data[0].company.map((item, index) => (
          <input type="text" key={index} value={item}></input>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

它呈现完美，但是当我试图编辑它时
编辑文本。 (不可编辑)
如果我在具有空白区域的同一数组中再添加一个输入
重视它也不起作用(未更新)。

Answer 1

您应该使用 state和 controlled components为了这。我强烈建议您实际阅读 React 在其网站右侧显示的主要概念，因为这将使您的开发过程更加轻松。

要将受控组件原理应用于当前代码，您需要将 onChange 事件绑定(bind)到您的输入:

class App extends React.Component {
  state = {
    title: "Hello World",
    companies: [
      "Google",
      "Apple",
      "Facebook"
    ],
  };

  updateCompany(newName, index) {
    const { companies } = this.state;
    const newCompanies = [...companies];
    newCompanies[index] = newName;
    this.setState({ companies: newCompanies });
  }

  render() {
    const { companies } = this.state;
    return (
      <ul>
        {companies.map((item, index) => (
          <input type="text" key={index} value={item} onChange={(e) => this.updateCompany(e.target.value, index)}></input>
        ))}
      </ul>
    );
  }
}