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

【问题标题】：how to update input text which is render by array map in REACTJS如何更新由 REACTJS 中的数组映射呈现的输入文本
【发布时间】：2019-05-14 20:42:56
【问题描述】：

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"));

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

【问题讨论】：

添加一个 onchange 事件。在这里阅读更多stackoverflow.com/questions/41736213/…
@CodeManiac 所说的。您的浏览器控制台应该会发出警告。

标签： javascript arrays reactjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

试试下面的代码：

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

class App extends React.Component {   
  handleChange = (e) => {
    const target = e.target;
    const value = target.value;
    const name = target.name;
    data[0].company[+name] = value
  }

  render() {
    return (
      <ul>
        {data[0].company.map((item, index) => (
          <input type="text" onchange={this.handleChange} name={""+index} key={index} value={item}></input>
        ))}
      </ul>
    );   
  } 
}

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

我将索引转换为输入名称并监听输入的变化并将索引转换为整数以替换数组中的值

【讨论】：

【解决方案3】：

试试下面的:)

class App extends React.Component {
  state = {
    companies: data[0].company,
  };

  updateText = (e, index) => {
    const companies = [...this.state.companies];
    companies[index] = e.target.value

    this.setState({ companies });
  }

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

【讨论】：