Javascript 访问ReactDOM.render中的输入值

我需要在ReactDOM.render（）中的单击处理程序中获取输入字段的值

App.js中的代码是

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

{
this.todoInput=节点
}}className=“向左拉”/>
添加待办事项

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

ReactDOM.render（{
console.log（this.refs）；
//仓库调度({
//键入：“ADD_TODO”，
//id:nextTodoId++，
{/*text:this.refs.todoInput.value*/}
{/*});*/}
{/*this.refs.todoInput.value=''；*/}
}}
/>,
document.getElementById（'root'）；

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

---

更新-下面提供的一个答案对我来说是另一种解决方案。然而，困扰我的原因很简单。我在ReactDOM.render（）中呈现应用程序组件。应用程序不应该通过某种机制直接访问其输入字段吗？

我建议您将

App

设置为有状态组件，然后您可以将

ref

或

ref

的值传递给

this.props.addTodo

函数

示例代码：

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

类应用程序扩展了React.Component{
handleClick（）{
this.props.addTodo（this.todoInput.value）；
}
render（）{
返回(
{this.todoInput=node}}className=“向左拉”/>
添加待办事项
)
}
}

我建议您将

应用程序制作成一个有状态的组件，然后您可以将
ref
或
ref
的值传递给
this.props.addTodo
函数

示例代码：

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

类应用程序扩展了React.Component{
handleClick（）{
this.props.addTodo（this.todoInput.value）；
}
render（）{
返回(
{this.todoInput=node}}className=“向左拉”/>
添加待办事项
)
}
}
在代码中，您引用了
addTodo
中的
todo
函数，如
this.refs.todoInput
。此处
此
引用当前实例，在该实例中，您正在渲染
ReactDOM.render
。
因此，
应用程序
实例中的
输入
无法在其他实例中访问

如果你想以自己的方式访问它，那么你需要像这样在你的应用程序中添加一个ref

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

在代码中，引用
addTodo
中的
todo
函数，如
this.refs.todoInput
。此处
此
引用当前实例，在该实例中，您正在渲染
ReactDOM.render
。
因此，
应用程序
实例中的
输入
无法在其他实例中访问

如果你想以自己的方式访问它，那么你需要像这样在你的应用程序中添加一个ref

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

好吧我确实为App.js提供了一个有状态的组件。此外，我在发布之前阅读了许多答案，这些答案将handleClick（）用作应用程序组件中的函数。因此，我的基本问题仍然是，是否没有办法在ReactDOM.render（）中直接访问输入的值？您可以传递一个函数，该函数将节点绑定到父组件（如果您希望这样做的话）。请欣赏并向上投票。我通过@Panther找到了我的理由。然而，我确实明白，实际上我会做这个解决方案。我只是在找理由。干杯！好吧我确实为App.js提供了一个有状态的组件。此外，我在发布之前阅读了许多答案，这些答案将handleClick（）用作应用程序组件中的函数。因此，我的基本问题仍然是，是否没有办法在ReactDOM.render（）中直接访问输入的值？您可以传递一个函数，该函数将节点绑定到父组件（如果您希望这样做的话）。请欣赏并向上投票。我通过@Panther找到了我的理由。然而，我确实明白，实际上我会做这个解决方案。我只是在找理由。干杯！令人耳目一新的正是我所需要的。令人耳目一新！正是我需要的。