React.js Comment accéder à la valeur d'entrée de l'enfant dans le composant

J'ai écrit simple todo application, mais maintenant j'ai des problèmes avec l'accès à la valeur de l'entrée de l'enfant dans le composant d'Application (InputForm).

Peut-être que j'ai besoin de reconstruire la structure ou de la logique d'une certaine façon cela fonctionne ?

Voici mon App composant:

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( e ){
    e.preventDefault();

    let itemHeading = this.refs.todoInput.value; //TODO Access to input value
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm onSubmit={this.addTodo.bind(this)}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

Voici mon InputForm composant:

class InputForm extends React.Component {
  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

Merci pour l'aide.

vous souhaitez passer la valeur pour le composant du composant.?
Je veux passer de la valeur de l'entrée de InputForm et de l'utiliser dans addTodo fonction dans App composant. Vous pouvez voir les choses à faire de commentaire sur la ligne où j'en ai besoin.
Double Possible de Comment obtenir les valeurs de composants enfants Réagissent

OriginalL'auteur Alexander Seredenko | 2016-12-24

  1. 1

    Les refs de l'objet que vous essayez d'accéder est sur le InputForm exemple, si vous voulez accéder à cette instance de App vous devrez ajouter une ref sur le InputForm.
    Ensuite, vous pouvez y accéder avec this.refs.InputForm.refs.todoInput.

    Cela dit, il est préférable de faire des ref rappels plutôt que de réf chaîne, comme la réf de la chaîne est prévu pour être retiré de Réagir.
    Il est également recommandé de ne pas utiliser les références. Peut-être que vous pouvez stocker la valeur dans le parent de l'etat par l'intermédiaire de onChange événement.

    https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute

    OriginalL'auteur Asaf David

  2. 1

    Je vais vous donner la solution la plus simple en passant de l'objet parent du composant parent à l'enfant de composants et d'accéder à des méthodes de composant parent directement auprès de l'enfant composant:

    class App extends React.Component {
constructor (){
super();
this.state = {
items : []
}
}
addTodo ( value ){
let itemHeading = value; 
let itemKey = Date.now();
const items = this.state.items.slice();
items.push({
heading: itemHeading,
key: itemKey
})
this.setState({items: items});
}
render() {
return (
<div className="app-container">
<InputForm parentObject={this}></InputForm>
<TodoItems entries={this.state.items} />
</div>
);
}
}
class InputForm extends React.Component {
this.onSubmit = this.onSubmit.bind(this);
this.onInput = this.onInput.bind(this);
onSubmit()
{
//invoking parent component function directly by passing parameter to it. 
this.props.parentObject.addTodo(this.state.value);
}
onInput(e) {
this.setState({
input: e.target.value
});
}
render (){
return (
<form onSubmit={this.props.onSubmit}>
<input
value={ this.state.value }
onChange={ this.onInput }
ref="todoInput"
type="text"
placeholder="Type your text here" />
<button type="submit">Add to list</button>
</form>
)
}
}

    OriginalL'auteur Codesingh