Question

我有一个容器组件，它使用输入呈现子组件。我想在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获取输入值？

Answer 1

您所看到的是React SyntheticEvent的一个实例。请注意，一切都会起作用，即这应该有效：

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

但是，如果要查看Developer工具中的值，请尝试：

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

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

引用：

您的事件处理程序将传递SyntheticEvent的实例，这是一个围绕浏览器本机事件的跨浏览器包装器。它具有与浏览器本机事件相同的接口，包括stopPropagation（）和preventDefault（），但事件在所有浏览器中的工作方式相同。如果由于某种原因发现您需要底层浏览器事件，只需使用nativeEvent属性即可获取它。

Answer 2

这是完全正常的。您可以通过event.target.value：

访问该值

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

More info in the React docs.

Answer 3

不确定是否输入错误，但您有hangleChange而不是handleChange。无论如何，onChange传递一个类似Event的对象，价值可以在event.target.value

中找到

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

Read up on React's event system

从子组件访问onChange事件（React / Redux）

3 个答案: