Reactjs findDOMNode 在组件上

Question

我有一个使用另一个组件的组件

render: function(){
    return(
        <div className={"col-md-8 col-md-offset-2"}>
            <form onSubmit={this.handleSubmit}>
                <div className="panel panel-default">
                    <div className="panel-body">
                        <CustomerForm />
                    </div>
                </div>
                <button type="submit" className={"btn btn-default"} onClick={this.handleFormSubmit} value="Post">Submit</button>
            </form>
        </div>
    )
}

当我尝试显示数据时没有问题，但是， 当我想使用这个函数将数据发布到我的后端时，问题就来了

handleSubmit: function(e) {
        e.preventDefault();

        var firstName = React.findDOMNode(this.refs.firstName).value.trim();

        if (!firstName) {
            return;
        }

        this.props.onCustomerSubmit({firstName: firstName});
        React.findDOMNode(this.refs.firstName).value = '';

        return;
}

因为 findDOMNode 仅适用于已安装的组件并且是子组件，所以我收到错误 Uncaught TypeError: Cannot read property 'value' of null

有没有解决此类问题的好方法？

Answer 1

深入了解您的refs 怎么样？

在您的render() 函数中：

<CustomerForm ref={'customerForm'} />

在您的 handleSubmit() 函数中：

React.findDOMNode(this.refs.customerForm.refs.firstName).value = '';

但这在这个类和你的CustomForm 类之间增加了一些非常紧密的耦合。也许更好的方法是重构？