javascript - React 中动态创建的元素 - 如何进行控制？

Question

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

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

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

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

一般而言，代码是这样的

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

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

所以，我希望我能够描述一个问题，像这样的事情一般如何在 React 中解决？

Answer 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方法来构建它。

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

它将按照您的需要工作。