javascript - ReactJS:显示或隐藏元素仅在第一次单击按钮时有效

Question

我完全按照这篇文章中投票最多的答案指出的那样做了 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>
        );
    }
});

Answer 1

你需要切换为

    onClick: function() {
        this.setState({ showResults: !this.state.showResults });
    },