Question

我是React的新手，我正在使用React v0.13.3和JSXTransformer v0.13.3创建一些简单的组件，每个组件都会在段落中呈现输入字段和按钮。单击任何按钮时，我想使用警报显示关联的输入值。我正在尝试使用refs来获取值，但由于某种原因它无效，并显示undefined。

这是我的代码：

var CommentBox = React.createClass({
    show: function() {
        alert(this.refs.test.value);
    },
    render: function() {
        return(<p><input type="text" ref="test" /><button type="button" onClick={this.show}>Show</button></p>);
    }
});
React.render(<div><CommentBox /><CommentBox /></div>, document.getElementById('commentbox'));

Answer 1

我建议绑定输入的onChange来设置状态值，如下所示：

<input onChange={event => this.setState({value: event.target.value})} />

现在this.state.value始终具有该字段的当前值。然后在show函数上，执行：

show: function() {
    alert(this.state.value);
}

Answer 2

您的代码运行正常！我把它放在jsfiddle。

然而，对于您的特定用例并不是一个好方法。一般情况下，您必须尝试不要过度使用refs 。以下是ReactJS related docs：

的引用

您的第一个倾向可能是在您的应用中使用refs“让事情发生”。如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有哪个状态。

所以，这是一个更好的方法：

出于类似目的，就像您需要的那样，使用controlled component是首选方式。我建议您考虑使用Component state。

因此，这是一个使用Component state如何实现相同结果的示例。我使用您的代码段作为基础：

var CommentBox = React.createClass({
    getInitialState() {
        return {
            // That's the default input value
            value: ''
        };
    },
    show: function() {
        alert(this.state.value);
    },
    handleChange: function(event) {
        // Each time the input's value is changed, the state gets an update
        this.setState({
            value: event.target.value
        });
    },
    render: function() {
        return(
            <p>
                <input onChange={this.handleChange} type="text" />
                <button type="button" onClick={this.show}>Show</button>
            </p>
        );
    }
});

React.render(
    <div><CommentBox /><CommentBox /></div>,
    document.getElementById('commentbox')
);

当我尝试访问它们时，为什么组件`refs``undefined`？

2 个答案: