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

Question

我想了解 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 的正确做法是什么？

Answer 1

首先，您将几个不同的东西混为一谈。 React 的“受控输入”模式不需要 Redux。您可以使用本地组件状态在组件内实现受控输入。我有一个在react-controlled-inputs.md 讨论这个概念的要点。

其次，即使您使用的是 Redux，您也没有 直接使用 Redux 状态和操作来控制输入。是否这样做取决于您。实际上，有时您可能希望在组件中本地缓冲文本 onChange 事件，并且仅在用户完成输入后才调度 Redux 操作。我在FormContentsContainer.jsx 有另一个要点演示缓冲包装器组件。

最后，即使您决定使用 Redux 状态直接控制输入，我也不确定您为什么说它是“更多事件”。输入的onChange 将在您每次键入时触发，无论如何。是选择对这些事件做一些事情，比如将它们转换为 Redux 操作，还是忽略它们，这取决于你。或者，如果您更喜欢使用“不受控制的输入”并在有人单击“提交”时询问输入的值，这也完全取决于您。

Answer 2

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

如果您只需要按钮点击的文本值，您可以通过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" />
  }
}

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