Zugriffseingabewert in ReactDOM.render

Question

Ich muss den Wert des Eingabefelds innerhalb eines Click-Handlers in ReactDOM.render() abrufen.

Der Code innerhalb App.js ist

<input ref={node => { 
      this.todoInput = node 
     }} className="pull-left" /> 
     <button onClick={this.props.addTodo}>Add Todo</button> 

index.js

ReactDOM.render(<App 
    todos={store.getState().todos} 
    addTodo={() => { 
     console.log(this.refs); 

     //store.dispatch({ 
     //  type: 'ADD_TODO', 
     // id: nextTodoId++, 
      {/*text: this.refs.todoInput.value*/} 
     {/*});*/} 

     {/*this.refs.todoInput.value = '';*/} 
    }} 
    />, 
    document.getElementById('root')); 

Innen addTodo Funktion, wie kann ich meine Refs Objekt zugreifen? Oder letztlich TodoInput Wert

Update zu bekommen - Eine der unten angegebenen Antworten funktioniert für mich als eine alternative Lösung. Der Grund, der mich nervt, ist jedoch einfach. Ich render App-Komponente innerhalb der ReactDOM.render(). Sollte App nicht direkt Zugang zu seinem Eingabefeld haben, wie es durch einen Mechanismus geschieht?

Answer 1

In Ihrem Code finden Sie die todo innerhalb addTodo Funktion wie this.refs.todoInput. Hier bezieht sich this auf die aktuelle Instanz, in der Sie ReactDOM.render rendern. So kann Ihre input, die innerhalb der app Instanz ist nicht in einer anderen Instanz zugegriffen werden.

Wenn Sie möchten, greifen Sie Ihren Weg, dann müssen Sie dieses

ReactDOM.render(<App 
ref={appInstance => { this.appInstance = appInstance;} } 
todos={store.getState().todos} 
..... 

eine ref zu Ihrer App hinzufügen Jetzt können Sie die Eingabe innerhalb App-Instanz zugreifen wie unter

addTodo={() => { 
    // your value from todoInput will be here.. 
    const value = this.appInstance.todoInput.value; 
}} 

Answer 2

Ich schlage vor, Sie App eine Stateful-Komponente zu machen und dann könnte man auf den ref oder den Wert der ref an die this.props.addTodo Funktion übergeben.

Beispielcode:

class App extends React.Component { 
    handleClick() { 
    this.props.addTodo(this.todoInput.value); 
    } 
    render() { 
    return (
     <input ref={node => { this.todoInput = node }} className="pull-left" /> 
     <button onClick={this.handleClick.bind(this)}>Add Todo</button> 
    ) 
    } 
}