在React中显示或隐藏元素

作者

我第一次在React.js上乱搞，找不到通过单击事件在页面上显示或隐藏内容的方法。我没有向页面加载任何其他库，因此我正在寻找使用React库的一些本地方法。这就是我目前所拥有的。我想在单击事件触发时显示results div

var Search=React.createClass({
handleClick:函数（事件）{
console.log（this.prop）；
},
渲染：函数（）{
返回(
&lt；div className=“日期范围”&gt；
&lt；input type=“submit”value=“Search”onClick={this.handleClick}/&gt；
&lt；/div&gt；
);
}
});
var Results=React.createClass({
渲染：函数（）{
返回(
&lt；div id=“results”className=“search results”&gt；
一些结果
&lt；/div&gt；
);
}
});
React.renderComponent（&lt；Search/&gt；，document.body）；

大约2020年

在onClick回调中，调用状态挂钩的setter函数来更新状态并重新渲染：

const Search=（）=&gt；{
常量[showResults，setShowResults]=React.useState（false）
const onClick=（）=&gt；setShowResults（true）
返回(
&lt；div&gt；
&lt；input type=“submit”value=“Search”onClick={onClick}/&gt；
{showResults？&lt；Results/&gt；：null}
&lt；/div&gt；
)
}
常量结果=（）=&gt；(
&lt；div id=“results”className=“search results”&gt；
一些结果
&lt；/div&gt；
)
ReactDOM.render（&lt；Search/&gt；，document.querySelector（“容器”））
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js“&gt&lt/脚本&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js“&gt&lt/脚本&gt；
&lt；div id=“容器”&gt；
&lt；！--此元素的内容将替换为您的组件--&燃气轮机；
&lt/部门&gt

JSFIDLE

大约2014年

关键是使用setState更新单击处理程序中组件的状态。当应用状态更改时，将使用新状态再次调用render方法：

var Search=React.createClass({
getInitialState:函数（）{
返回{showResults:false}；
},
onClick:function（）{
this.setState（{showResults:true}）；
},
render:function（）{
返回(
&lt；div&gt；
&lt；input type=“submit”value=“Search”onClick={this.onClick}/&gt；
{this.state.showResults？&lt；Results/&gt；：null}
&lt；/div&gt；
);
}
});
var Results=React.createClass({
render:function（）{
返回(
&lt；div id=“results”className=“search results”&gt；
一些结果
&lt；/div&gt；
);
}
});
ReactDOM.render（&lt；Search/&gt；，document.getElementById（'container'））
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js“&gt&lt/脚本&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js“&gt&lt/脚本&gt；
&lt；div id=“容器”&gt；
&lt；！--此元素的内容将替换为您的组件--&燃气轮机；
&lt/部门&gt

JSFIDLE

相关文章：

  1. 从AngularJS控制器向视图中插入HTML
  2. 为什么在Redux中需要用于异步流的中间件？
  3. 尝试从REST API获取数据时，请求的资源上不存在“Access Control Allow Origin”标头
  4. Moment.js转换为日期对象

发表评论

© 2025 开发百科-程序代码问答平台 • Built with