时间戳

首页 > 解决方案 > 使用 onClick 事件更新空字符串

javascript - 使用 onClick 事件更新空字符串

问题描述

我只是有一个小问题。

我不知道在处理click事件时如何更新我的空字符串。我正在使用反应。

这是我的代码中最重要的部分：

// MultiStepform.js

const defaultData = {
  // I would like to update this
  Grund: '',
  H: '',
  W: '',
  G: '',
};

export const MultiStepFrom = () => {
  const [formData, setForm] = useForm(defualtData);
  const {step, navigation} = useStep({
    steps, 
    initialStep: 0,
  });

  const props = {formData, setForm, navigation};
};

Häuser.js

我想给她表演 onClick 事件）

   function Häuser({formData, setForm, navigation}) {
      const {Grund, H, W, G} = formData;

          const changState = () => {
          navigation.next();
          setForm([{Grund: "newvalue"}]); 

       }
      );
       }

          return (
           <div
          className="container__containerimgage"
           name="Grundstück"
               value={Grundstück}
                onClick={changState}
                   
         );
            }

标签： javascriptreactjs

解决方案

问题

你不能直接操纵状态，它是const. 您应该使用状态更新器功能。

解决方案

使用setForm函数更新表单状态。

使用表格

您会看到useForm使用您的名称input并更改对象，因此您只需创建一个 useForm.

代码

function Häuser({formData, setForm, navigation}) {
  const { Grund, H, W, G } = formData;

  const changeState = (changeEvent) => { // <-- new onChange event with value
    navigation.next();
    setForm(changeEvent); // <-- pass event to updater
    ...
  }

  ...

  <input
    value={Grund}
    name="Grund" // <-- ensure the input name matches field name
    onChange={changeState}
  />

推荐阅读