反应 - 如何显示相关的元素，当点击按钮

我有分量呈现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中的输入将显示。

你是如何做到这一点的？

来源

2016-11-03 angry kiwi

它应该是的className –

我使用属性转换插件中的WebPack笔，所以可使用类代替的className –

如果是我，我会做一个新的组件出：显示输入

让我们把它叫做<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> 
    ) 
    } 
}

来源

2016-11-03 17:50:25 finalfreq

我有3个动态输入，而不是仅仅一个。你能展示你如何用动态元素做到这一点吗？ –

@angry_kiwi然后渲染InputToggler 3次。这是React组件的一半原因，它们是可重用的。 –

@MatisLepik通过将它提取到它自己的组件中不仅可以在这里重复使用它三次，而且可以在应用程序中的任何其他位置重用它，并且它会处理它自己的内部状态。你只需要将项目作为一个道具传入，如codepen中所示。如果你有一个items数组并且想要每个item都有一个输入，你可以像'items.map（function（item，index）{return }）那会返回一个InputToggler组件的数组，每个组件都有自己的状态。 – finalfreq

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

每个按钮都应该有回调函数前面的onClick。 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"})

在同一时间输入字段类名应该是指国家

注意，我忽略你有多个对象的事实，你可能想要在数组中处理它们的引用。

来源

2016-11-03 17:49:03 Aus

反应 - 如何显示相关的元素，当点击按钮

回答

相关问题