Question

我试图获取输入更改时的值，但是每次键入数字时该值都是不确定的

const Numbers = ({ onChange, value }) => {
    <Input 
    onChange={onChange}
    />
};

Numbers.propTypes= {
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    onChange: PropTypes.func.isRequired
};
Numbers.defaultProps {
    value: undefined
}
export default Numbers;

class UseNumbers extends React.Component {
    state={
        value: this.props.value
    };

    onChange = (name, value) => {
        console.log('value on change', value);
        this.setState({ value });
    };

    render() {
        return (
            <Number
                {...this.props}
                onChange={
                    this.onChange
                }
            />
        );
    }
    
}

UseNumbers.propTypes = {
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};

UseNumbers.defaultProps = {
    value: undefined
};

export default UseNumbers;

我尝试记录该值，此处未定义。在Number函数中，我也放置了props值和onChange，似乎还可以，但是我不知道为什么值未定义

Answer 1

onChange事件处理程序将传递一个Event对象，而不是您期望的name和value。

您可以使用Event属性从Event.target对象中提取名称和值。 Event.target.name将包含触发onChange事件的输入的名称，而Event.target.value将包含该输入的最新值。

尽管react将Synthetic Event对象传递给事件处理程序，而不只是Event对象，但综合事件对象是围绕浏览器本地事件的跨浏览器包装，并且具有与浏览器本地事件相同的接口

如下所示更改事件处理程序：

onChange = (event) => {
    // destructure name and value properties from event.target object
    const { name, value } = event.target;
    console.log('value on change', value);
    this.setState({ value });
};

PS 如果要访问触发name事件的输入元素的名称，还需要在input元素上添加onChange属性

Answer 2

您的数字组件返回未定义，您确定您的代码正常工作吗？没有抛出错误吗？

const Numbers = ({ onChange, value }) => {
    return <Input 
    onChange={onChange}
    />
};

重点是您的onChange函数：

onChange = (e) => {
    console.log('value on change', e.target.value);
    this.setState({value});
}

输入元素将Event作为第一个参数传递给onChange函数，但是，您是说这个输入组件是您的自定义组件？

道具值返回未定义

2 个答案: