我完全按照这篇文章中投票最多的答案指出的那样做了 show or hide element in react.js显示和隐藏我的元素。
但它仅适用于首次单击按钮。如果我在我的表单中输入另一个值并重新提交,那么数据将与以前相同。它永远不会第二次进入“结果”。我做错了什么?
这是来自上面那个链接的代码:
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
ReactDOM.render(<Search />, document.getElementById('container'));
编辑新代码:
module.exports = React.createClass({
getInitialState: function() {
console.log("in getInitialState");
return { showResults: false };
},
onClick: function(e) {
e.preventDefault();
data = null;
console.log("in onClick");
ticId = ReactDOM.findDOMNode(this.refs.ticketid).value;
if (this.state.showResults == true) // second button click (update data)
{
var newdata = "";
$.ajax({
url: 'http://localhost:x/' + 'tickets',
type: 'GET',
dataType: 'json',
async: false,
headers: {
"Authorization": "Basic " + btoa(u + ":" + p)
},
data: {ticketid: ticId},
success: function(result) {
newdata = result.results;
}
});
if(newdata)
{
console.log(newdata); //SUCCESS: getting new data here
}
this.state.data = newdata; //FAIL: state not getting refreshed
}
else
{
this.setState({ showResults: true });
}
},
render: function() {
return (
<div className='someclass'>
<form className="someForm" onSubmit={this.onClick}>
<input type="text" placeholder = "Enter ticket Id" ref="ticketid" />
<input type="submit" value="Find!!" />
{ this.state.showResults ? <Results /> : null }
</form>
</div>
);
}
});
最佳答案
你需要切换为
onClick: function() {
this.setState({ showResults: !this.state.showResults });
},
关于javascript - ReactJS:显示或隐藏元素仅在第一次单击按钮时有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39716396/