React: как использовать текущее состояние в событиях

Question

У меня есть форма для отправки. Вот как выглядит мое состояние.

const [valueState, setValueState] = useState({
    dr_start_date: null,
    dr_end_date: null,
    s_key: "Staging + Commiting in report",
  });

После обновления состояния с помощью функции setValueState я хочу отправить форму для события onClick. (Моя функция щелчка)

const handleClick = () => {
    console.log(valueState);
  }

Выход этого состояния является начальным состоянием. Может кто-нибудь сказать мне, как использовать переменную состояния в событиях функций?

Примечание: вот как я обновляю состояние.

function handleInputOne(event, element) {
    if (typeof event.persist === "function") event.persist();

    const { derive_value_from, ele_def } = element;

    setValueState((prevState) => {
      const newValueState = { ...prevState };
      newValueState[derive_value_from] = event.target.value;
      return newValueState;
    });
  }

Answer 1

просто используйте событие из ввода, например:

const handleChange = (event)=>{
const {value,name} = event.target
setValue(currentState=>{...currentState,[name]:value})
}

, а для входного компонента добавьте свойство имени следующим образом:

<input name="dr_start_date" value={value.dr_start_date} onChange={handleChange}/>

и проверьте обновление состояния:

useEffect(()=>{
console.log(value)
},[value])

этот эффект будет запускаться каждый раз при изменении значения.