React 中动态创建的元素 - 如何控制？答案

【问题标题】：Dynamically Created Elements in React - How to have control?React 中动态创建的元素 - 如何控制？
【发布时间】：2017-11-21 19:28:48
【问题描述】：

这是一个更普遍的问题。我需要一个想法来处理一个问题，所以我不会给你具体的代码。

我有一个项目列表，通过地图功能输出。基本上一切都很好。但我想嵌入一个组件，它会显示一个输入来重命名该项目。

这个想法是有人单击某个按钮，触发重命名处理程序，并且那里有一个输入来重命名该项目。

所以，重命名组件有效，我唯一坚持的是：

一般来说，代码是这样的

list.map(item => <li key={item.id}>{item.name} <Rename inputValue={this.state.value} inputHandler={this.inputHandler} /></li>)

如何使重命名仅在单击触发器仅针对单击要重命名的项目时才显示？问题还在于，该输入将绑定到一个状态，并且将有一个处理程序来更改该状态。这意味着，每个输入都将具有相同的状态和相同的处理程序。

所以，我希望我能够描述一个问题，一般来说，像这样的事情会在反应中得到解决吗？

【问题讨论】：

是的，我会让每个项目都成为它自己的组件，<Item />，然后你会渲染出一个项目组件列表。这里的优点是现在每个项目都可以跟踪它自己的状态。因此，您可以将条件逻辑移出地图并移至 <Item /> 组件中。

标签： javascript reactjs

【解决方案1】：

这在 react 中很容易实现。

你只需要保持组件中的状态。

我给你看一个非常简单的模型：

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
      showInput: false,
      value: props.value
    }
  }

  triggerClick() {
    this.setState({showInput: true});
  }

  handleChange(value) {
    // do update value
  }

  render() {
    const {value, showInput} = this.state;
    return (
      <div>
        <button onClick={this.triggerClick}>show input</button>
        {showInput ?
          <input type="text" value={value} onChange={this.handleChange}/>
        : null}
        <p>{value}</p>
      </div>
    );
  }
}

然后使用你提到的map method 来构建它。

list.map(item => <Item value={item.value}/>)

它会根据您的需要工作。

【讨论】：