我的日期选择器不会在react hook中更改其值

Question

我使用react hooks来更改日期选择器值，但它不会更改，它在类组件中正常工作，但我想将其更改为hooks组件

以下代码不起作用

function Example() {
const [value, setValue] = useState({
startDate: new Date(),
endDate: new Date(),
key: 'selection',
});
const handleChange = (e) => {
setValue((prevState) => ({
...prevState,
[e.target.name]: e.target.value,
}));
};
return (
<InputDate
name="value"
max={30}
value={value}
onChange={handleChange}
/>
);
}

以下代码为工作(类别组件(

class Example extends Component {
state = {
value: {
startDate: new Date(),
endDate: new Date(),
key: 'selection',
}
}
handleChange = e => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<InputDate
name="value"
max={30}
value={this.state.value}
onChange={this.handleChange}
/>
);
}
}

Answer 1

这是由于事件池。您需要从处理程序本身中的事件中提取值。

UPD我假设代码的其余部分是正确的：名称、InputDate处理您输入的值的形状等。

function Example() {
const [value, setValue] = useState({
startDate: new Date(),
endDate: new Date(),
key: 'selection',
});
const handleChange = (e) => {
const {name, value} = e.target;
setValue((prevState) => ({
...prevState,
[name]: value,
}));
};
return (
<InputDate
name="value"
max={30}
value={value}
onChange={handleChange}
/>
);
}

Answer 2

function Example() {
const [value, setValue] = useState({
startDate: new Date(),
endDate: new Date(),
key: 'selection',
});
const handleChange = (e) => {
setValue((prevState) => ({
...prevState,
[e.target.name]: new Date(e.target.value),
}));
};
return (
<InputDate
name="value"
max={30}
value={value}
onChange={handleChange}
/>
);
}