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 });
    },

Answer 2

最好使用它：

onClick: function() {
  this.setState(function (prevState) {
    return {
      showResults: !prevState.showResults
    };
  });
}

Source

ReactJS：显示或隐藏元素仅在第一次按钮单击时起作用

2 个答案: