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

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

我有一个通过映射函数输出的项目列表。基本上一切都好。但我想嵌入一个组件，它将显示一个输入来重命名该项

其思想是，有人单击某个按钮，触发重命名处理程序，然后有一个输入来重命名该项

因此，重命名组件可以工作，我唯一坚持的是：

一般来说，代码是这样的

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

list.map（item=>
{item.name}
）

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

---

所以，我希望我能够描述一个问题，像这样的问题在react中通常会解决多少？

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

---

它可以根据您的需要工作。

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

---

它可以根据您的需要工作。

是的，我会让每个项目都成为自己的组件，

，然后您会呈现项目组件列表。这里的优点是，现在每个项目都可以跟踪自己的状态。因此，您可以将条件逻辑从映射中移到

组件中。是的，我将使每个项都成为自己的组件，

，然后您将呈现一个项组件列表。这里的优点是，现在每个项目都可以跟踪自己的状态。因此，您可以将条件逻辑移出映射并移入

组件。