Reactjs 切换显示/隐藏到特定元素

我有一个特殊的代码，它显示了每个问题和按钮的列表。当我点击按钮时，它会显示问题的具体答案。我的问题是，我有一大堆问题，当我点击按钮时，它会显示所有答案，而不是该问题的具体答案

这是密码

class App extends React.Component {
 constructor(){
  super()
  this.state = {
                  answer: [],
                  isHidden: true
               }
  this.toggleHidden = this.toggleHidden.bind(this)
}

componentWillMount(){
  fetch('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot')
    .then(res => res.json())
    .then( (data) => {
      const answer = data.data.children.map(obj => obj.data);
      this.setState({answer});
     })
 }

toggleHidden(){
  this.setState({isHidden: !this.state.isHidden})
}

render(){
    const answer = this.state.answer.slice(2)
    return <div>
             <h1>Drunk or Kid</h1>
             {answer.map(answer =>
              <div key={answer.id}>
                <p className="title">{answer.title}</p>
                <button onClick={this.toggleHidden}>Answer</button>
                {!this.state.isHidden && <Show>{answer.selftext}</Show>}
               </div>
             )}
           </div>
  }
}
const Show = (props) => <p className="answer">{props.children}</p>

类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
答复：[]，
伊希登：是的
}
this.toggleHidden=this.toggleHidden.bind（this）
}
组件willmount（）{
取（'http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot')
.then（res=>res.json（））
。然后（（数据）=>{
const answer=data.data.children.map（obj=>obj.data）；
this.setState（{answer}）；
})
}
切换隐藏（）{
this.setState（{ishiden:！this.state.ishiden}）
}
render（）{
const answer=this.state.answer.slice（2）
返回
喝醉了还是小孩
{answer.map（answer=>
{answer.title}
答复
{！this.state.ishiden&&{answer.selftext}
)}
}
}
const Show=（props）=>
{props.children}

这里是链接到

这里是一个基于我的建议：

子组件的基础是：

class Question extends React.Component {
  // Set initial state of isHidden to false
  constructor() {
    super();
    this.state = {
      isHidden: false
    }
  }
  // Toggle the visibility
  toggleHidden() {
    this.setState({
      isHidden: !this.state.isHidden
    });
  }
  // Render the component
  render() {
    const { answer } = this.props;
    return (
      <div key={answer.id}>
        <p className="title">{answer.title}</p>
        <button onClick={ () => this.toggleHidden() }>Answer</button>
        {this.state.isHidden && <Show>{answer.selftext}</Show>}
      </div>
    );
  }
}

类问题扩展了React.Component{
//将isHidden的初始状态设置为false
构造函数（）{
超级（）；
此.state={
伊希登：错
}
}
//切换可见性
切换隐藏（）{
这是我的国家({
isHidden:！this.state.isHidden
});
}
//渲染组件
render（）{
const{answer}=this.props；
返回(
{answer.title}
this.toggleHidden（）}>答案
{this.state.ishiden&&{answer.selftext}
);
}
}

然后在父组件中映射到它，如下所示：

answer.map(answer =>
    <Question answer={answer} key={answer.id} />
)

answer.map（answer=>
)

另一个选项是添加保存打开的应答id的状态，然后检查特定应答是否处于该状态

让我们看看行动

class SomeComponent extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            opened: []
        }
        this.toggleShowHide = this.toggleShowHide.bind(this)
    }
    toggleShowHide(e){
        const id = parseInt(e.currentTarget.dataset.id)
        if (this.state.opened.indexOf(id) != -1){
            // remove from array
            this.setState({opened: this.state.opened.filter(o => o !== id)})
        } else {
            this.setState({opened: [...this.state.opened, id]})
        }
    }
    render(){
        return <ul>
            { this.state.answers.map(ans => (
                <li key={ans.id} data-id={ans.id}>
                    question 
                    <button onClick={this.toggleShowHide}>show answer</button>
                    <span
                     style={{ display: this.state.opened.indexOf(ans.id) !== -1 ? 'block' : 'none' }}>answer</span>
                </li>
             ))}
       </ul>
    }
}

类SomeComponent扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
已打开：[]
}
this.toggleShowHide=this.toggleShowHide.bind（this）
}
切换显示隐藏（e）{
const id=parseInt（e.currentTarget.dataset.id）
if（this.state.opened.indexOf（id）！=-1）{
//从阵列中删除
this.setState（{opened:this.state.opened.filter（o=>o！==id）}）
}否则{
this.setState（{opened:[…this.state.opened，id]}）
}
}
render（）{
返回

{this.state.answers.map（ans=>(

问题:
作答
回答

))}

}
}

---

这是一段正在运行的视频

所有答案都共享同一个

ishiden

状态。因此，当您切换该状态布尔值时，它们都会显示。您必须为每个答案隔离

ishiden

状态，以便让它们独立切换。由于React设计为基于组件的，我建议为每个问答组合使用

isHidden

状态创建一个组件，并映射该数据为每个组合创建一个实例。如果您想了解更多信息，我发现了一个很好的教程：

this.toggleHidden（）}>Answer

为什么要在这里放置回调，而不仅仅是

onClick=this.toggleHidden

？在我的原始代码中，

onClick=this.toggleHidden

切换可以工作，但当我试图将其粘贴到代码中时，它说无法设置未定义的设置状态？谢谢您的回答。@Irsyad14您必须在构造函数中重新添加绑定。我正在写一个解决方案，很快

this.toggleHidden=this.toggleHidden.bind（this）

现在我知道了。我真傻。我是一个新的反应。再次感谢