Reactjs 用于textarea的onChange事件，而不是在需要时获取值

我想了解React提倡的处理textarea值变化的方法对性能的影响

在React的单向数据流原理之前，我们应该：

button.onClick( processInput(textarea.value) );

现在，我们必须这样做

textarea.onChange( dispatch({ type: "inputChange", value: textarea.value }) );
button.onClick( dispatch({ type: "buttonClick" }) );

store(
    if (action.type === "inputChange") {
        this.lastInput = action.value
    } else if (action.type === "buttonClick") {
        processInput(this.lastInput)
    }
)

---

我的理解正确吗？与以前相比，这次事件不是更多了吗？为什么垃圾邮件包含许多无用的

inputChange

事件？如果我的理解不正确，那么正确的反应方式是什么？

首先，你把一些不同的事情混为一谈。React的“受控输入”模式不需要重复。可以使用本地组件状态在组件内部实现受控输入。我有一个讨论这个概念的要点

第二，即使您正在使用Redux，也不必直接使用Redux状态和操作来控制输入。你是否这样做取决于你自己。事实上，有时您可能希望在组件中本地缓冲text

onChange

事件，并且仅在用户完成键入后发送Redux操作。我有另一个要点来演示缓冲包装器组件

---

最后，即使您决定使用Redux状态直接控制输入，我也不确定您为什么说它是“更多事件”。不管怎样，每次输入时，输入的

onChange

都会触发。这取决于您是否选择对这些事件执行某些操作，比如将它们转换为Redux操作，或者忽略它们。或者，如果您更喜欢使用“非受控输入”，当有人单击“提交”时，您只需询问输入的值，这也完全取决于您。

首先，您混淆了两个不同的内容。React的“受控输入”模式不需要重复。可以使用本地组件状态在组件内部实现受控输入。我有一个讨论这个概念的要点

第二，即使您正在使用Redux，也不必直接使用Redux状态和操作来控制输入。你是否这样做取决于你自己。事实上，有时您可能希望在组件中本地缓冲text

onChange

事件，并且仅在用户完成键入后发送Redux操作。我有另一个要点来演示缓冲包装器组件

最后，即使您决定使用Redux状态直接控制输入，我也不确定您为什么说它是“更多事件”。不管怎样，每次输入时，输入的

onChange

都会触发。这取决于您是否选择对这些事件执行某些操作，比如将它们转换为Redux操作，或者忽略它们。或者，如果您更喜欢使用“非受控输入”，当有人单击Submit时，您只需询问输入的值，这也完全取决于您。

我认为最好从中提取实际代码并将其放在这里

如果您只需要单击按钮时输入文本值，可以通过

ref

const MyComponent extends Component {  
  onClick() {  
    const input = this.refs.myInput;  
    const value = input.value;  
    // do something with the value  
  }

  render() {
    return <input type="text" ref="myInput" />
  }
}

const MyComponent扩展组件{
onClick（）{
常量输入=this.refs.myInput；
常量值=input.value；
//做一些有价值的事情
}
render（）{
返回
}
}

您可以使用REF访问组件内部的DOM元素。如果您需要一些简单的解决方案，这将对您有用。

我认为最好从中提取实际代码并放在这里

如果您只需要单击按钮时输入文本值，可以通过

ref

const MyComponent extends Component {  
  onClick() {  
    const input = this.refs.myInput;  
    const value = input.value;  
    // do something with the value  
  }

  render() {
    return <input type="text" ref="myInput" />
  }
}

const MyComponent扩展组件{
onClick（）{
常量输入=this.refs.myInput；
常量值=input.value；
//做一些有价值的事情
}
render（）{
返回
}
}

---

您可以使用REF访问组件内部的DOM元素。如果您需要一些简单的解决方案，这将适合您。

对。我还认为onChange事件无论如何都会被解雇。其他观点也很正确。我还认为onChange事件无论如何都会被解雇。其他几点也是有效的。我听说

ref

通常不鼓励使用，因为它违反了“一个数据流方向”，而您使用

ref

只是为了读取一些属性，它不会违反“单向数据流”规则，所以您可以安全地使用它。我听说

ref

通常不鼓励使用，因为它违反了“一个数据流方向”当您使用

ref

仅读取某些属性时，它不会违反“单向数据流”规则，因此您可以安全地使用它。