您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　4.5.6 不使用ref

　　在前面的例子中，代码通过React的ref功能来访问DOM中元素，这种功能的需求往往来自于提交表单的操作，在提交表单的时候，需要读取当前表单中input元素的值。

　　毫无疑问，ref的用法非常脆弱，因为React的产生就是为了避免直接操作DOM元素，因为直接访问DOM元素很容易产生失控的情况，现在为了读取某个DOM元素的值，通过ref取得对元素的直接引用，不得不说，干得并不漂亮。

　　有没有更好的办法呢？

　　有，可以利用组件状态来同步记录DOM元素的值，这种方法可以控制住组件不使用ref。

　　Todo应用中的addTodo.js文件可以这样修改，首先是render函数，代码如下：

　　render() {

　　return (

　　添加

　　)

　　}

　　在这里我们不再使用ref来获取对input元素的直接访问，而是利用input元素上的onChange属性挂上一个事件处理函数onInputChange，这样每当input的值发生变化时，onInputChange函数就会被调用，这样我们总有机会记录下最新的input元素内容。

　　onInputChange函数的代码如下：

　　onInputChange(event) {

　　this.setState({

　　value: event.target.value

　　});

　　}

　　在onInputChange函数中，通过传入的事件参数event可以访问到事件发生的目标，读取到当前值，并把内容存在组件状态的value字段上。这样，组件状态上总能够获得最新的input元素内容。

　　然后看onSubmit函数的改变，代码如下：

　　onSubmit(ev) {

　　ev.preventDefault();

　　const inputValue = this.state.value;

　　if (!inputValue.trim()) {

　　return;

　　}

　　this.props.onAdd(inputValue);

　　this.setState({value: ''});

　　}

　　当需要提交表单的时候，onSubmit函数被调用，只需要直接从组件状态上读取value字段的值就足够了。

　　在产品开发中，应该尽量避免ref的使用，而换用这种状态绑定的方法来获取元素的值。 深入浅出React和Redux