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

为输入组件添加 name 属性，如下所示：

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

并检查状态更新：

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

每次值更改时都会运行此效果。