기본 기능을 사용하여 React에서 요소를 표시하거나 숨기는 방법은 무엇입니까?

React에서 요소 표시 또는 숨기기

질문

React.js를 실험하는 동안 사용자가 React에서 요소를 표시하거나 숨기는 데 어려움을 겪습니다. 클릭을 통해 페이지. 외부 라이브러리에 의존하지 않고 기본 React 라이브러리 솔루션을 요청합니다.

답변

React circa 2020

React의 상태 후크를 활용하면 다음과 같은 작업을 수행할 수 있습니다. onClick 콜백에서 구성요소 상태 업데이트:

<code class="javascript">const Search = () => {
  const [showResults, setShowResults] = React.useState(false);
  const onClick = () => setShowResults(true);
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  );
};</code>

React circa 2016

React의 레거시 API 사용:

<code class="javascript">var Search = React.createClass({
  getDefaultProps() {
    return { resultsHidden: true };
  },
  handleClick: function () {
    this.setState({ resultsHidden: false });
  },
  render: function () {
    return (
      <div className="date-range">
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.props.resultsHidden ? <Results /> : null }
      </div>
    );
  }
});</code>

위 내용은 기본 기능을 사용하여 React에서 요소를 표시하거나 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!