Question

刚学习React，我已经看到了从文本输入中获取值的各种不同方法。我想问一下是否所有这些都是正确的，或者使用一个是否有任何优势。

方法1）：

MyForm = React.createClass({
    getInitialState: function() {
        return {
            username: ""
        };
    },
    onSubmit: function(e) {
        e.preventDefault();
        this.setState({
            username: this.refs.username.getDOMNode().value
        });
        /* Do something... */
    },
    render: function(){
        return (
            <div>
                <form onSubmit={this.onSubmit} id="login-form">
                    <input type="text" ref="username"></input>
                </form>
            </div>
        )
    }
});

方法2）：

MyForm = React.createClass({
    getInitialState: function() {
        return {
            username: ""
        };
    },
    handleUsernameChange: function(evt) {
        this.setState({
            username: evt.target.value
        });
    },
    onSubmit: function(e) {
        e.preventDefault();
        /* Do something... */
    },
    render: function(){
        return (
            <div>
                <form onSubmit={this.onSubmit} id="login-form">
                    <input type="text" onChange={this.handleUsernameChange}></input>
                </form>
            </div>
        )
    }
});

Answer 1

方法2是处理输入的首选方法。方法1是反模式。我的工作场所使用的皮棉规则明确禁止getDOMNode()。使用表单和/或引用时，从复杂的输入字段（例如前端库提供的自定义下拉组件）中检索值可能变得困难，有时甚至无法实现。

在不同的输入字段中使用onChange道具来跟踪状态更加统一，并且可以更轻松地过渡到redux或类似技术。

当需要跟踪许多元素的值时，您是对的，因为不建议为每个元素编写处理函数。您可以编写一个更高阶的泛型函数。例如，代替

handleUsernameChange: function(evt) {
    this.setState({
        username: evt.target.value
    });
}

您可以有一个通用

handleChange: field => evt => {
    this.setState({
        [field]: evt.target.value
    });
}

作为您的onChange道具，您将有this.handleChange('username')

获取React组件中的输入字段值

1 个答案: