在状态未更改时反应重新渲染组件？

Question

在 jsfiddle 中，我创建了一个带有输入字段的简单 React 组件。如果发生错误（_handleSubmit），组件将重新渲染并带有额外的 class（无效）。在输入焦点上，class 将被外部脚本删除，在这种情况下，由 materializecss 删除。如果下次单击提交按钮，状态将不会改变，组件也不会重新呈现为 DOM，对吗？但是，我如何取回无效的 class？我应该使用 forceUpdate 吗？什么是正确的方法？谢谢！

var Form = React.createClass({
    getInitialState() {
        return {
            error: false
        }
    },
    _handleSubmit: function(event){
    event.preventDefault();
        this.setState({
            error: true
        })
    },
    render: function() {
        return (
            <div className="row">
                <div className="col s12">
                    <form>
                        <div className="input-field">
                            <input type="text" className={"validate" + (this.state.error ? " invalid" : "")} name="foobar" id="foobar" data-cip-id="foobar" />
                            <label htmlFor="foobar">foobar</label>
                        </div>
                        <button onClick={this._handleSubmit}>submit</button>
                    </form>
                </div>
             </div>   
            );
    }
});

ReactDOM.render(
    <Form />,
    document.getElementById('container')
);

Answer 1

我看不到它发生的确切位置，但是当您删除焦点上的无效 class 时，您并没有重置状态。

React 认为它不需要重绘，因为它不知道 DOM 同时发生了变化。

将您的代码更改为此

var Form = React.createClass({
    getInitialState() {
        return {
            error: false
        }
    },
    _handleSubmit: function(event){
    event.preventDefault();
        this.setState({
            error: true
        })
        console.log(this.state);
    },
    render: function() {
        console.log(this.state);
        return (
            <div className="row">
                <div className="col s12">
                    <form>
                        <div className="input-field">
                            <input type="text" key="foobar-{this.state.error}" className={"validate" + (this.state.error ? " invalid" : "")} name="foobar" id="foobar" data-cip-id="foobar" />
                            <label htmlFor="foobar">foobar</label>
                        </div>
                        <button onClick={this._handleSubmit}>submit</button>
                    </form>
                </div>
            </div>
        );
    }
});

ReactDOM.render(
    <Form />,
    document.getElementById('container')
);

Click around 并且您会注意到在初始提交后错误状态始终为真。

更新 1

我已经实现了 onFocus 方法来重置错误状态。你使用 this.ref.

让它变得太复杂了

var Form = React.createClass({
    getInitialState() {
        return {
            error: false
        };
    },
    _handleSubmit: function(event){
    event.preventDefault();
        this.setState({
            error: true
        });
    },
    _resetError: function(error){
        this.setState({
            error: false
        });
    },
    render: function() {
        return (
            <div className="row">
                <div className="col s12">
                    <form>
                        <div className="input-field">
                            <input type="text" className={"validate" + (this.state.error ? " invalid" : "")} name="foobar" id="foobar" data-cip-id="foobar" onFocus={this._resetError} />
                            <label htmlFor="foobar">foobar</label>
                        </div>
                        <button onClick={this._handleSubmit}>submit</button>
                    </form>
                </div>
             </div>   
            );
    }
});

ReactDOM.render(
    <Form />,
    document.getElementById('container')
);

详情见this fiddle。

在状态未更改时反应重新渲染组件？

React rerender component while state not changed?

materialize

reactjs