React：避免 Refs 访问子组件状态的方法答案

【问题标题】：React: way to avoid Refs to access Child component's stateReact：避免 Refs 访问子组件状态的方法
【发布时间】：2016-01-14 17:22:04
【问题描述】：

所以我读到我们应该在访问子组件时尝试避免引用

(React refs with components)

(https://facebook.github.io/react/docs/more-about-refs.html)

然而，在我的情况下，我想不出一种方法来避免这种情况..

场景：

我有一个 MyForm 父组件，其中包含一个 TagInput 子组件，类似于 Stackoveflow 的“Tags”输入字段。当用户输入输入+空格时，标签被添加到 TagInput 的内部状态。当用户提交表单时，选择的标签列表会发布到我的服务器。

实施：

var MyForm = React.createClass({
    submit: function() {
        var selectedTags = this.refs.tagInput.state.selectedTags;

        $.post(
            SERVER_URL,
            data: { tags: selectedTags }
        );
    },

    render: function() {
        return (
            <form onSubmit={this.submit}>
                <TagInput ref="tagInput">
            </form>
        );
    }
});


var TagInput = React.createClass({
    getInitialState: function() {
        return {
            selectedTags: []
        }
    },

    // This is called when the user types SPACE in input field
    handleAddTag: function(tag) {
        this.setState({
            selectedTags: this.state.selectedTags.concat(tag);
        });
    },

    render: function() {
        return (
            <form>
                <ul>{this.state.selectedTags}</ul>
                <input type="text" />
            </form>
        );
    }
});

上面的代码工作正常，并符合预期。唯一担心的是我使用 refs 直接访问 Child 组件的内部状态，我不确定这是否是正确的“React”方式。

我想一种选择是在 MyForm 而不是 TagInput 中保持“selectedTags”状态。这在我的情况下没有任何意义，因为实际上我的表单包含 5 个 TagInput 组件和许多其他要管理的状态..

谁能想到改进我的设计的方法？还是在我的情况下使用 refs 是不可避免的？

谢谢

【问题讨论】：

标签： reactjs state

【解决方案1】：

您可以将handleAddTag从父组件传递到子组件中，并在表单组件中保持选中标签的状态。现在，当您提交表单时，您正在从表单上的状态中提取，而不是使用 refs。

var MyForm = React.createClass({
    getInitialState: function() {
        return {
            selectedTags: []
        }
    },

    submit: function() {
        var selectedTags = this.state.selectedTags;

        $.post(
            SERVER_URL,
            data: { tags: selectedTags }
        );
    },

    // This is called when the user types SPACE in input field
    handleAddTag: function(tag) {
       this.setState({
           selectedTags: this.state.selectedTags.concat(tag);
       });
    },

    render: function() {
        return (
           <form onSubmit={this.submit}>
               <TagInput handleAddTag={this.handleAddTag} ref="tagInput">
           </form>
       );
   }
});

//Use this.props.handleAddTag() to update state in Form Component
var TagInput = React.createClass({

  render: function() {
      return (
          <form>
               <ul>{this.state.selectedTags}</ul>
               <input type="text" />
          </form>
        );
     }
 });

我发现使用 refs 获取一些数据并不像使用 refs 修改 UI 那样糟糕，因为它会导致 UI 无法与您的状态或应用程序内联。

【讨论】：