从子组件（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事件

回答

相关问题