React에서 드롭 다운 결과를 토글하는 버튼을 어떻게 추가합니까?

Question

나는 아직도 React에 대해 많은 것을 배우고있다. 그러나 나는 그것이해야한다고 생각하는 것보다 훨씬 어려운 토글을 발견하고있다.

내가 목표로하는 것은 '추가'라는 제목의 링크입니다. 클릭하면 '추가됨!'이라는 제목의 새 레이블이 표시됩니다. 원래 'Add Me'링크도 제거했습니다.

아래의 코드는 현재 가지고있는 것입니다.하지만 작동하지 않을 것이라고 생각합니다. 나는이 간단한 조치에 대한 답변을 &에 많이 읽었으며 그 중 아무 것도이 문제를 해결하지 못했습니다. 내가 잘못하고있는 것에 대한 어떤 통찰력이든 &/또는 그것을 고치는 방법은 매우 유용 할 것입니다!

미리 감사드립니다.

JSX는 :

class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
    showComponent: false, 
    }; 
    this.Search__toggle = this.Search__toggle.bind(this); 
} 

Search__toggle() { 
    this.setState({ 
    showComponent: true, 
    }); 
} 

render() { 
    return ( 
     <div className="FormField__control"> 
      <a onClick={this.Search__toggle}><i className="fa fa-plus" aria-hidden="true" /> 
       Add Me 
      </a> 
      {this.state.showComponent ? <div>Added!</div> : null } 
     </div> 
    ); 
} 

export default App; 

Answer 1

당신은 추가를 전환 할 수 있습니다! 당신이 숨기려면 Search__toggle을 수정하여 lable가() 방법으로 또한

Search__toggle() { 
 
    let oldState = this.state 
 
    this.setState({ 
 
     showComponent: !oldState.showComponent, 
 
    }); 
 
    }

아래에 는 다음과 같이 수정 저에게 렌더링() 메소드를 링크를 추가

render() { 
 
     return ( 
 
      <div className="FormField__control"> 
 
       {this.state.showComponent ? 
 
       <div>Added!</div> : 
 
       <a onClick={this.Search__toggle}><i className="fa fa-plus" aria-hidden="true" /> 
 
        Add Me 
 
       </a> 
 
       } 
 
      </div> 
 
    ); 
 
    }

Answer 2

당신은 거의 거기에 있었다 :-). 당신이 요소를 토글하고 싶지 않고 오히려 한 번 추가하기 때문에 당신의 함수에 맞는 이름이 Search__toggle인지 확신 할 수 없습니다.

class App extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     showComponent: false, 
 
    }; 
 
    this.addItem = this.addItem.bind(this); 
 
    } 
 

 
    addItem() { 
 
    this.setState({ 
 
     showComponent: true, 
 
    }); 
 
    } 
 

 
    render() { 
 
    return ( 
 
     <div className="FormField__control"> 
 
      { this.state.showComponent ? 
 
      "Added" 
 
      : 
 
      <a onClick={this.addItem}> 
 
       <i className="fa fa-plus" aria-hidden="true" />Add Me 
 
      </a> 
 
      } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App name="World" />, 
 
    document.getElementById('container') 
 
);

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

당신이 아니라 당신의 요소를 전환하고자하지만, 여기 또 다른 버전입니다. 이 도움이

class App extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     showComponent: false, 
 
    }; 
 
    this.Search__toggle = this.Search__toggle.bind(this); 
 
    } 
 

 
    Search__toggle() { 
 
    this.setState({ 
 
     showComponent: !this.state.showComponent, 
 
    }); 
 
    } 
 

 
    render() { 
 
    return ( 
 
     <div className="FormField__control"> 
 
      { this.state.showComponent ? 
 
      <a onClick={this.Search__toggle}> 
 
       <i className="fa fa-minus" aria-hidden="true" />Added 
 
      </a> 
 
      : 
 
      <a onClick={this.Search__toggle}> 
 
       <i className="fa fa-plus" aria-hidden="true" />Add Me 
 
      </a> 
 
      } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App name="World" />, 
 
    document.getElementById('container') 
 
);

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

희망!