我是新手做出反应。如何在单击反应按钮后才渲染组件?
在我的例子中,单击一个按钮,我必须显示一个显示数据库中数据的表。
我已将下面的代码附加到您的参考中,第一个组件是按钮组件,下面是您可以找到该组件的组件。
此外,我想知道如何在不刷新整个页面的情况下单击按钮来刷新组件。
var Button = React.createClass({
render: function () {
return (
<button type="button">Display</button>
); }
});
var EmployeeRow = React.createClass({
render: function () {
return (
<tr>
<td>{this.props.item.EmployeeID}</td>
<td>{this.props.item.FirstName}</td>
<td>{this.props.item.LastName}</td>
<td>{this.props.item.Gender}</td>
</tr>
);
}
});
var EmployeeTable = React.createClass({
getInitialState: function(){
return{
result:[]
}
},
componentWillMount: function(){
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function () {
var response = JSON.parse(xhr.responseText);
this.setState({ result: response });
}.bind(this);
xhr.send();
},
render: function(){
var rows = [];
this.state.result.forEach(function (item) {
rows.push(<EmployeeRow key={item.EmployeeID} item={item} />);
});
return (
<Button />
<table className="table">
<thead>
<tr>
<th>EmployeeID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
);
} });
ReactDOM.render(<EmployeeTable url="api/Employee/GetEmployeeList" />,
document.getElementById('grid'))
答案 0 :(得分:9)
我已经设置了sandbox to showcase如何做到这一点。
false
onClick
setState
),true
true
)答案 1 :(得分:2)
你可以这样做。
首先使用属性显示初始化状态,并在组件安装时使用false。
componentDidMount() {
this.state = {
show: false
};
}
添加一个功能来改变状态。 (您也可以使用此功能切换状态)
showTable() {
this.setState({
show: true
});
}
单击按钮调用该功能。
<button onclick="showTable()">
Show Table
</button>
将您的表格与大括号一起添加到这样的表达式中。
{
this.state.show &&
<table className="table">
<thead>
<tr>
<th>EmployeeID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
}
希望这有帮助!