Question

为了学习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>
        );
    }
});

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

该代码有什么问题？

Answer 1

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

this.refs.task.findDOMNode().value

Answer 2

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

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

无法以React形式访问输入值

2 个答案: