组件上的 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>
    )
}

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

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 属性 'value' of null

有什么好的方法可以解决这样的问题吗？

Answer 1

深入了解您的 refs 怎么样？

在您的 render() 函数中：

<CustomerForm ref={'customerForm'} />

并在您的 handleSubmit() 函数中：

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

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

组件上的 Reactjs findDOMNode

Reactjs findDOMNode on components

post

components

reactjs