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仅适用于已安装的组件并且是子组件，所以我得到错误未捕获的TypeError：无法读取属性'value'为null

有没有好办法解决这个问题？

Answer 1

如何深入了解refs？

在render()函数中：

<CustomerForm ref={'customerForm'} />

并在handleSubmit()函数中：

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

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

Reactjs在组件上查找DOMNode

1 个答案: