javascript - Passing data to parent in React - Stack Overflow

admin管理员组

文章数量:1287849

I'm new to React and thus the question. I have a parent Component - HomePage with a child Component - SideBar.

My child ponent sidebar needs to pass a data back to the parent on a submit button click which the parent needs to post on an api.

This my parent ponent,

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>

    );
  }

}

This is my child ponent,

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

My question is how do I grab the input text with the onclick method on the sidebar button click and pass it up to the parent to post it on an api. Any help appreciated.

I'm new to React and thus the question. I have a parent Component - HomePage with a child Component - SideBar.

My child ponent sidebar needs to pass a data back to the parent on a submit button click which the parent needs to post on an api.

This my parent ponent,

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>

    );
  }

}

This is my child ponent,

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

My question is how do I grab the input text with the onclick method on the sidebar button click and pass it up to the parent to post it on an api. Any help appreciated.

• javascript
• reactjs
• dom

Share Improve this question Follow asked Nov 9, 2016 at 18:55 user6761897user6761897

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Your parent Component should not access the input directly, but rather rely on the child ponent to pass any values to the parent when required.

class HomePage extends React.Component {

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

  handleSubmit(textInputValue){
    // The callback passed to the child ponent 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 ponent
    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>
    );
  }
}

This prevents coupling your ponents together and will ease testing later.

In your child ponent you can create a property for the ref attribute. Accessing DOM elements directly is usually done by setting refs.

In your parent ponent you can use an arrow function with a callback which allows you to access the <input> DOM element anywhere within your parent ponent, by simply typing this.textInput

More information about refs can be found in the official React documentation: https://facebook.github.io/react/docs/refs-and-the-dom.html

Parent ponent:

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

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

Child ponent:

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

There's a couple ways you can go about it. One is you can add an onChange event to the input to update state of the Sidebar ponent. Then when the submit handler is clicked, pass the value from state, and have the HomePage handleSubmit() accept the value.

The other is to also pass an onChange prop from the HomePage ponent to the Sidebar. The input would then set the onChange to that prop.

本文标签： javascriptPassing data to parent in ReactStack Overflow