在React 應用程式中，您經常需要根據情況顯示或隱藏元素關於用戶互動。讓我們探索如何使用原生 React 功能來實現這一點。
var Search= React.createClass({</p><pre class="brush:php;toolbar:false">handleClick: function (event) {
console.log(this.prop);
},
render: function () {
return (
<div className="date-range">
<input type="submit" value="Search" onClick={this.handleClick} />
</div>
);
}});
var Results = React.createClass({
render: function () {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}});
React.renderComponent(
< p>在此範例中：
要切換元素可見性，我們需要維護狀態。在現代版本的React 中，我們可以使用useState 鉤子來管理元件狀態：
const Search = () => ; {<br> const [showResults, setShowResults] = useState(false)<br> const handleClick = () =>; setShowResults(true)<br> return (</p><pre class="brush:php;toolbar:false"><div>
<input type="submit" value="Search" onClick={handleClick} />
{ showResults ? <Results /> : null }
</div><
const Results = () =>; (
Some Results
ReactDOM.render(< ;Search //>, document.querySelector("#container"))
這裡：
Stateuse 用初始值初始化狀態變數(showResults) (false)。以上是如何在 React 中切換元素可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
