Question

我有像这样渲染jsx的组件

<section>

    <div>
        <input type="text" class="hide" />
        <button id={item.uniqueID}>show input</button>
    </div>

    <div>
        <input type="text" class="hide" />
        <button id={item.uniqueID}>show input</button>
    </div>

    <div>
        <input type="text" class="hide" />
        <button id={item.uniqueID}>show input</button>
    </div>
</section>

我想要这种行为，当我点击第一个div中的按钮时，第一个div中的输入将显示。同样，我点击第三个div中的按钮，第三个div中的输入将显示。

你是如何反应的？

Answer 1

如果是我，我会制作一个新组件：显示输入

让我们称之为<InputToggler/>

然后它将有一个inputHidden状态用于它自己的输入并使用类来确定它是否应该显示，并且按钮将有一个onclick处理程序来切换隐藏或显示的状态。这是一支完全显示

的笔

http://codepen.io/finalfreq/pen/VKPXoN

class InputToggler extends React.Component {
  constructor() {
    super();

    this.state = {
      inputHidden: true
    }
  }

  toggleInput = () => {
    this.setState({
      inputHidden: !this.state.inputHidden
    })
  };

  render() {
    const inputClass = this.state.inputHidden ? 'hide' : '';
    const buttonLabel = this.state.inputHidden ? 'show input' : 'hide input'
    return (
      <span>
        <input type="text" className={inputClass} />
        <button onClick={this.toggleInput} id={this.props.item.uniqueID}>          
          {buttonLabel}
        </button>
      </span>
     )
  }
}

Answer 2

这个概念不是确切的代码。

每个按钮都应该有onClick并回调函数ex。 toggleShow

<button id={item.uniqueID} onClick={this.toggleShow.bind(this)}>show input</button>

toggleShow做类似的事情：

toggleShow(e){
    var item = e.target.id;
    this.setState({inputClassName1: "hide"})

同时输入字段classname应该引用状态

请注意，我省略了您有多个对象的事实，您可能希望在数组中处理它们的引用。

反应 - 点击按钮时如何显示相关元素

2 个答案: