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

时间:2020-09-24 15:57:40

标签: javascript reactjs react-redux react-router react-hooks

我正在使用react钩子来更改datepicker值,但不会改变,它在类组件中正常工作,但是我想将其更改为钩子组件

下面的代码不起作用

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}
            />
    );
  }
}

1 个答案:

答案 0 :(得分:0)

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

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}
          />
  );
}