将 show/hide 切换到特定元素

Question

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

这是代码

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>

这里是 link 到 codepen

Answer 1

这里是 Codepen 根据我的建议：

子组件的基础是：

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>
    );
  }
}

然后您将在父组件中将其映射为：

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

Answer 2

另一种选择是添加一个状态来保存打开的答案 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>
    }
}

这是实战视频https://www.youtube.com/watch?v=GJsPEsckB4w

将 show/hide 切换到特定元素

Toggle show/hide to a specific element

reactjs

react-jsx