Передача данных родительскому в Реакт

Question

Я новичок в реактиве и, следовательно, вопрос. У меня есть родительский компонент - Главная страница с дочерним компонентом - SideBar.

На моей боковой панели дочерних компонентов необходимо передать данные родительскому элементу на кнопку отправки, щелкнув которую родитель должен отправить на api.

Это мой родительский компонент,

class HomePage extends React.Component{ 

    constructor(props) { 
    ....... 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleSubmit(){ 
    //Logic to get the data from the child and post to localhost:8080/ 
    } 
    render(){ 
    return(

     <div className="col-md-2 left-pane"> 
      <Sidebar handleSubmitButton={this.state.handleSubmit}/> 
     </div> 

    ); 
    } 

} 

Это мой ребенок компонент,

class Sidebar extends React.Component { 

    handleSubmitButton(event) { 
    event.preventDefault(); 

    } 

    render() { 
    return (
     <div> 

      <input type="text"/> 

      <button type="button" className="btn btn-info btn-icons" onClick={this.props.handleSubmitButton} > 
       <span className="glyphicon glyphicon-send" aria-hidden="true"/> 
      </button> 


     </div> 
    ); 

    } 
} 

Sidebar.propTypes = { 
    handleSubmitButton: React.PropTypes.func 
}; 

Мой вопрос, как я хватаю ввода текста с помощью метода OnClick на кнопке боковой панели мыши и проход это до родителя, чтобы опубликовать его на api. Любая помощь оценивается.

Answer 1

В дочернем компоненте вы можете создать свойство для атрибута ref. Доступ к элементам DOM напрямую осуществляется путем установки ссылок.

В вашем родительском компоненте вы можете использовать функцию стрелки с обратным вызовом, которая позволяет получить доступ к элементу <input> DOM в любом месте в пределах вашего родительского компонента, просто введя this.textInput

Более подробную информации о ссылках можно найти в официальная Реагировать документация: https://facebook.github.io/react/docs/refs-and-the-dom.html

родитель компонент:

handleSubmit() { 
    console.log(this.textInput.value); 
} 

<Sidebar 
    inputRef={(input) => this.textInput = input} 
    handleSubmitButton={this.state.handleSubmit} 
/> 

Детский компонент:

<input ref={this.props.inputRef} type="text"/> 

Answer 2

Есть несколько способов, которыми вы можете это сделать. Во-первых, вы можете добавить событие onChange к вводу для обновления состояния компонента боковой панели. Затем, когда щелкнуть обработчик отправки, передать значение из состояния и обработать дескриптор HomePage handleSubmit().

Другой должен также передать опору onChange от компонента HomePage к боковой панели. Затем вход будет устанавливать onChange на эту опору.

Answer 3

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

class HomePage extends React.Component { 

    constructor(props) { 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(textInputValue){ 
    // The callback passed to the child component will 
    // submit the data back to it's parent. 
    // Logic to post to localhost:8080/ 
    } 

    render(){ 
    return(
     <div className="col-md-2 left-pane"> 
     <Sidebar handleSubmitButton={ this.handleSubmit }/> 
     </div> 
    ); 
    } 
} 

class Sidebar extends React.Component { 

    constructor(props) { 
    this.handleSubmitButton = this.handleSubmitButton.bind(this); 
    } 

    handleSubmitButton(event) { 
    event.preventDefault(); 

    // By giving the input the `ref` attribute, we can access it anywhere 
    const textInputValue = this.refs.input.value; 

    // Submit the value to the parent component 
    this.props.handleSubmitButton(textInputValue); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" ref="input" /> 

     <button type="button" className="..." onClick={this.handleSubmitButton} > 
      <span className="glyphicon glyphicon-send" aria-hidden="true"/> 
     </button> 
     </div> 
    ); 
    } 
} 

Это предотвращает совместное соединение компонентов и облегчит тестирование позже.