无法以 React 形式访问输入值答案

【问题标题】：Cannot access input value in React form无法以 React 形式访问输入值
【发布时间】：2015-10-22 16:36:06
【问题描述】：

为了学习React，我决定使用官方教程中的信息，自己制作一个小Todo应用程序。

我制作了一个小表单来提交新任务，但在我的组件中，我无法访问 refs 的值。当我尝试通过以下方式访问其值时，它会显示每次未定义：

this.refs.task.value

这是组件：

var TodoForm = React.createClass({

    handleSubmit: function(e) {
        e.preventDefault();
        var task = this.refs.task.value;
        alert(task);
        this.refs.task.value = '';
        return;
    },

    render: function(){
        return (
            <ul className="list-group">
                <li className="list-group-item">
                    <form onSubmit={this.handleSubmit}>
                        <div className="row">
                            <input ref="task" className="form-control" type="text" placeholder="ajouter une tache"  />
                            <input type="submit" className="btn btn-default" value="envoyer" />
                        </div>
                    </form>
                </li>
            </ul>
        );
    }
});

我添加了小警报来控制任务变量的值，它显示未定义。

这段代码有什么问题？

【问题讨论】：

似乎从 React 0.14 开始，this.refs.task.value 将对内置组件有效。 facebook.github.io/react/blog/2015/10/07/…

标签： reactjs

【解决方案1】：

this.refs.task 是一个指向元素的 React 引用。它不会将元素值存储在自身内部。需要拉出DOM节点，然后获取值：

this.refs.task.findDOMNode().value

【讨论】：

@JonasBarenfeld 确定！如果您可以将答案标记为已接受，我将不胜感激：D
当然，快速更新，刚刚看到 getDOMNode() 已被贬低，所以我正在使用 findDOMNode()

【解决方案2】：

如果有的话，不要直接为 DOM 元素设置值。this.refs.task.value = '';

此外，最好将 ref 挂在表单上，并使用本地方法。所以你可以做<form ref="myForm"> 然后访问它的元素this.refs.myForm.inputName.value 其中inpuName 是字段的名称。因此，您应该没有使用属性名称。

【讨论】：