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

【问题标题】：ReactJS: Show or hide element works only on first button clickReactJS：显示或隐藏元素仅在第一次单击按钮时起作用
【发布时间】：2017-02-04 14:20:27
【问题描述】：

我完全按照这篇帖子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>
        );
    }
});

【问题讨论】：

你能澄清一下If I input another value in my form and resubmit it then the data remains the same as before.吗？
所以我在我的 html 中有一个表单，它接受用户输入，并基于此我进行 ajax 调用以将数据获取到我的结果中。但是发生的情况是，当用户第一次输入一个值时，一切正常。但是当用户在搜索框中输入另一个值时，结果不会被刷新，而是保持不变。
@90abyss 是一个带有静态文本的组件吧？您希望在第二个输入上看到什么？
不，上面只是链接帖子中的代码 sn-p。我代码中的组件基本上是根据用户输入进行 ajax 调用。

标签： javascript reactjs

【解决方案1】：

你需要切换为

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

【讨论】：

感谢法扎尔。我这样做了，它仅在我单击提交按钮两次时才有效。在第一次单击时，它会清除显示的结果，而在第二次单击时，它实际上会呈现结果。我还需要在 onClick 函数中添加什么来解决这个问题吗？
只有在没有可用的tickets 时才切换showResults。放置一个 if 语句
你能看看我上面的编辑吗？不确定当 this.state.showResults == true 时要做什么。如果我将其设为 false，则将显示 render() null 中该条件的 bcoz。如果我什么都不做，则结果不会刷新。如何确保结果已刷新？

【解决方案2】：

最好用这个：

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

Source

【讨论】：

嘿内文。感谢您的回复。当前的问题是结果没有得到刷新。我可以切换，但是当 this.state.showResults 已经等于 true 时结果不会更新。请看我上面的编辑。
@90abyss 我确实读过。但是是一个带有静态文本的组件，对吧？您希望在第二个输入上看到什么？您提到-“当前的问题是结果没有刷新。” -> 结果是一个带有静态文本的静态组件，你想在其中刷新什么？
有一个 html 表单接受用户输入“ticketid”。组件使用这个ticketid 对服务器进行ajax 调用。它返回格式化的结果。所以问题是当用户第一次进入并输入“123”时，一切正常。但是，当他再次搜索另一张票“576”时，不会调用组件。我不确定如何更新数据的状态
@90abyss 你如何将 ticketId 传递给组件？也显示该代码。
我基本上是在上面定义了一个全局变量“ticId”，并在不同的组件中使用它。我正在使用“ticId = ReactDOM.findDOMNode(this.refs.ticketid).value;”更新它如果您查看我的新编辑，我尝试强制更新新数据，但“this.state.data = newdata”不起作用。