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

Posted 2023-02-22

【中文标题】如何更新由 REACTJS 中的数组映射呈现的输入文本

【英文标题】：how to update input text which is render by array map in 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 事件。在这里阅读更多***.com/questions/41736213/…

@CodeManiac 所说的。您的浏览器控制台应该会发出警告。

【参考方案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>
    );