Wie Komponente wechseln, basierend auf Klick-Index in ReactJS

Question

var Comp = React.createClass({ 
    getInitialState: function(){ 
     return {hide: false}; 
    }, 
    toggle: function(){ 
     this.setState({hide: !this.state.hide}); 
    }, 
    render: function() { 
     return <div> 
      <button onClick={this.toggle}>toggle</button>  
      <div className={'hide-' + this.state.hide}>Hi there</div> 

     <button onClick={this.toggle}>toggle</button>  
      <div className={'hide-' + this.state.hide}>Hi there</div> 

     <button onClick={this.toggle}>toggle</button>  
      <div className={'hide-' + this.state.hide}>Hi there</div> 

     <button onClick={this.toggle}>toggle</button>  
      <div className={'hide-' + this.state.hide}>Hi there</div> 
     </div>; 
    } 
}); 

ReactDOM.render(
    <Comp />, 
    document.getElementById('container') 
); 

https://jsfiddle.net/9lessons/aLd1w6qs/3/

Answer 1

Sie verwenden einen gemeinsamen Zustandsvariablen die div zu wechseln. Da es unter allen div s geteilt wird s Änderung der Sichtbarkeit von einem würde sie alle gleichzeitig ändern.

Sie können entweder separate Statusvariable für jeden von Div erstellen, z. B. hide1, hide2 ..... hideN.

Oder

Versuchen Sie eine andere approach- zu schaffen separate Komponente selbst.

var ToggleableComp = React.createClass({ 
    getInitialState:function() { 
     return {hide: false}; 
    }, 
    toggle: function(){ 
     this.setState({hide: !this.state.hide}); 
    }, 
    render: function() { 
     return (
     <div> 
     <button onClick={this.toggle}>toggle</button>  
      <div className={'hide-' + this.state.hide}>{this.props.children}</div> 
     </div> 
    ); 
    } 
}); 

var Comp = React.createClass({ 
    render: function() { 
     return (
      <div> 
      <ToggleableComp>Json Data 1</ToggleableComp> 
      <ToggleableComp>Json Data 2</ToggleableComp> 
      <ToggleableComp>Json Data 3</ToggleableComp> 
      <ToggleableComp>Json Data 5</ToggleableComp> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <Comp />, 
    document.getElementById('container') 
); 

prüft diese fiddle

Answer 2

Lösung für diese Frage, versuchen Kommentar Schaltfläche klicken.

var EachCom = React.createClass({ 
    getInitialState: function(){ 
    return { showComment: false }; 
    }, 
    commentLink: function() 
    { 
    this.setState({ showComment: !this.state.showComment }); 
    this.renderCommentForm; 
    }, 
    renderCommentForm: function() 
    { 

if(this.state.showComment) 
{ 
return (<CommentForm />) 
} 

}, 
render: function(){ 
return <div><br/> 
<button onClick={this.commentLink}> comment </button> 
{this.renderCommentForm()} 
</div> 
} 
}); 

var TaskList = React.createClass({ 


    render: function(){ 
     return <div> 
      {this.props.items.map((task, taskIndex) => 
       <div key={taskIndex}> 
        {task} 
        <EachCom /> 

       </div> 
      )} 
     </div>; 
    } 
}); 

http://jsfiddle.net/9lessons/t37Lk6p4/171/