onChange事件爲textarea而不是在需要時獲取值

我想了解React主張的處理textarea值更改的方式對性能的影響。onChange事件爲textarea而不是在需要時獲取值

陣營的單向數據流的理念之前，一個會做：

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方法是什麼？

來源

2016-09-15 Boyang

首先，你正在合併一些不同的東西。 React的「受控輸入」模式不需要Redux。您可以使用本地組件狀態在組件內實現受控輸入。我有一個要求在https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc討論這個概念的要點。其次，即使你使用Redux，你也不要有來直接控制輸入的Redux狀態和動作。你是否這樣做取決於你。實際上，有時候您可能需要在組件中本地緩存文本onChange事件，並且只有在用戶輸入完成後才發送Redux動作。我還有另外一個要點，在https://gist.github.com/markerikson/554cab15d83fd994dfab上演示一個緩衝包裝組件。

最後，即使你決定直接控制一個輸入與Redux狀態，我不確定你爲什麼說這是「更多的事件」。無論如何，輸入的onChange將在每次鍵入時觸發。無論您選擇如何將這些事件轉化爲Redux操作或忽略這些事件，都取決於您。或者，如果您更喜歡使用「不受控制的輸入」，並在有人點擊提交時向輸入值詢問輸入值，那麼這完全取決於您。

來源

2016-09-15 20:32:04 markerikson

沒錯。我也認爲onChange事件將被解僱。其他點也是有效的 – Boyang

我認爲最好是從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" /> 
    } 
}

你可以使用你的裁判組件的內部訪問DOM元素。如果你需要一些簡單的解決方案，那對你很有用。

來源

2016-09-16 10:03:09

我聽說'ref'的用法一般是不鼓勵的，因爲它違反了「一個數據流的方向」 – Boyang

當您使用'ref'只讀取一些屬性時，它不會破壞「單向數據流「的規則，所以你可以安全地使用它。 –

onChange事件爲textarea而不是在需要時獲取值

回答

相關問題