javascript - 受控组件输入字段 onChange 行为

Question

我有一个受控组件，其输入 字段代表日期值。由于这一天值可以有 1-2 位数字，例如必须删除 12 才能输入 21。 由于 onChange react 事件的行为类似于 input DOM 事件，我只能删除或输入一位数字并且事件被触发，因此整个模型更新得太早在我删除一个数字后将日期设置为 1。

<input
     name={name}
     type="number"
     value={value}
     onChange={(e) => { onChange(e.target.value) } }
 />

感谢defaultValue change does not re-render input我可以使用带有 onBlur 事件的 uncontrolled component 输入来处理这个问题。使用 key 可确保在通过其他方式更改模型时发生新的渲染:

  <input
     name={name}
     type="number"
     defaultValue={value}
     key={value}
     onBlur={(e) => { onChange(e.target.value); }}
 />

但老实说，这感觉像是黑客攻击。您如何解决这种情况？我是否忽略了更简单的事情？您是否在更新模型(从而等待完整的用户输入)之前使用超时功能，也就是去抖动？

Answer 1

为什么不能同时使用 onChange 和 onBlur ？

class NumberChooser extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fieldValue: props.value,
            time: ''
        }
    }
    onChange(e){
        this.setState({fieldValue: e.target.value});
    }
    render(){
        return ( 
                <input
                    name={this.props.name}
                    type="number"
                    value={this.state.fieldValue} 
                    //key={value} not sure what do with this
                    onChange={this.onChange}
                    onBlur={(e) => this.props.onChange(e.target.value)}
                />
        );
    }
}
export default NumberChooser;