從子組件（React/Redux）訪問onChange事件

我有一個容器組件，它使用輸入呈現子組件。我想在onChange事件期間訪問子組件的值，但我得到的是「代理」對象而不是輸入值。從子組件（React/Redux）訪問onChange事件

容器組件

... 

class InputContainer extends React.Component { 

    handleChange = (val) => { 
     console.log(val); 

     // => Proxy { [[Handler]]: Object, [[Target]]: SyntheticEvent, [[isRevoked]]: false } 
    } 

    render() { 
     return <Input handleChange={this.handleChange} {...this.props} />; 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(InputContainer);

輸入組件

export default function Input(props) { 
    return <input onChange={props.handleChange} />; 
}

爲什麼會出現這種「代理」對象，我怎麼能得到InputContainer輸入的值？

來源

2016-08-12 Himmel

我假設'hangleChange'在你的問題中是一個錯字？ – Timo

你們看到的是陣營的SyntheticEvent的一個實例。請注意，一切都會是相同的，即這應該工作：

console.log('ev -> ', ev.target.value);

但是，如果你想看到開發人員工具中的值嘗試：

console.log('ev -> ', ev.nativeEvent);

來源：https://facebook.github.io/react/docs/events.html

報價：

您的事件處理程序將傳遞SyntheticEvent的實例，它是一個跨瀏覽器的包裝器瀏覽器的本地事件。它具有與瀏覽器的本機事件相同的界面，包括stopPropagation（）和preventDefault（），但事件在所有瀏覽器中的工作方式相同。如果您發現由於某種原因需要基礎瀏覽器事件，只需使用nativeEvent屬性即可獲取它。

來源

2016-10-17 17:20:50 Guy

不知道這是一個打字錯誤，但你必須hangleChange，而不是handleChange。無論如何，onChange傳遞一個Event樣物體，值可以在event.target.value

handleChange(event) { 
    console.log(event.target.value);

Read up on React's event system

來源

2016-08-12 18:00:38

這是一個錯字。我想我被綜合賽事嚇到了。謝謝您的幫助！ – Himmel

這是完全正常的發現。您可以通過event.target.value訪問值：

handleChange(event) { 
    console.log(event.target.value); 
}

More info in the React docs.

來源

2016-08-12 18:01:31 Timo

從子組件（React/Redux）訪問onChange事件

回答

相關問題