Блог

Я использую react hooks для изменения значения datepicker, но оно не изменится, оно нормально работает в компоненте класса, но я хочу изменить его на компонент 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}
            />
    );
  }
}
  

Это связано с объединением событий. Вам нужно извлечь значения из события в самом обработчике.

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

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