javascript - 访问 ReactDOM.render 中的输入值

Question

我需要在 ReactDOM.render() 内的点击处理程序中获取输入字段的值。

App.js 内的代码是

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

在 addTodo 函数中，如何访问我的 refs 对象？或者最终获取todoInput的值

更新 - 下面提供的答案之一对我来说是一种替代解决方案。然而，困扰我的原因很简单。我在 ReactDOM.render() 内部渲染 App 组件。应用程序不应该通过某种机制直接访问它的输入字段吗？

Answer 1

在您的代码中，您可以像 this.refs.todoInput 一样引用 addTodo 函数内的 todo。这里 this 指的是渲染 ReactDOM.render 的当前实例。 因此，您位于 app 实例内的 input 无法在其他实例中访问。

如果您想以自己的方式访问它，那么您需要像这样向您的应用添加引用

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

现在您可以访问应用程序实例内的输入，如下所示

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