React: способ избежать Refs доступа к состоянию Child компонента

Question

Таким образом, я прочитал, что мы должны попытаться избежать рефов, когда доступ к компонентам Child

(React refs with components)

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

В в моем случае, однако, я не мог придумать, как избежать этого в моей ситуации.

Сценарий:

У меня есть MyForm родительский компонент, который содержит дочерний компонент TagInput, напоминающая "Метки" поле ввода Stackoveflow в. Когда пользователь вводит ввод + SPACE, тег добавляется к Внутреннему состоянию 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 для прямого доступа к внутреннему состоянию дочернего компонента, и я не уверен, что это правильный способ «Реагировать».

Я предполагаю, что один вариант для поддержания «selectedTags» состояние в MyForm вместо TagInput. Это действительно не имеет смысла в моем случае, потому что на самом деле моя форма содержит 5 . Компоненты TagInput и многие другие состояния для управления.

Может ли кто-нибудь подумать о способе улучшения моего дизайна? Или использует refs в моем случае?

Благодаря

Answer 1

Вы можете передать handleAddTag от родительского компонента в ребенка и сохранить состояние выбранных тегов в виде компонента. Теперь, когда вы отправляете форму, которую вы вытягиваете из состояния в форме, а не используете ссылки.

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> 
     ); 
    } 
}); 

Я обнаружил, что использование рефов получить некоторую часть данных не так плохо, как с помощью рефов для изменения пользовательского интерфейса, который очень плохо, как это приведет к UI, чтобы не быть рядным с вашим государством или приложением.