如何在函数触发时更新我的 DOM？

Question

我做错了什么。但是我不太明白它是什么。

诚然，我是 js/React 上的菜鸟。每次我的 redux-form 字段更新时，我都设法触发了我的功能。但是我无法将输出输出到 dom。谁能看出我做错了什么？

我的代码：

const Register = () => {
  
  var output =  "this should disappear when changed fires"
  
  const onSubmit = (formValues) => {
    console.log("formValues", formValues); //<-- fires fine.
  };

  const changed = (formValues) => {
    if (formValues?.firstName) {
        output = simpleStringify(formValues);
        console.log(output) // <-- the output is changed
        
    }
  };

  return (
    <div>
      Register Page
      <RegistrationForm onSubmit={onSubmit} onChange={changed} user={user} />
     <Highlight>{output}</Highlight> {/*  not updating */}
    </div>
  );
};

export default Register;

我假设，我需要 'inject' 输出。

Answer 1

var 输出应该是 ReactJS 中要更新的状态:)

在挂钩中：

const [output, setOutput] = useState("this should disappear when changed fires"); 

const changed = (formValues) => {
    if (formValues?.firstName) {
        setOutput(simpleStringify(formValues));
        
        
    }
};

useEffect(() => {
   console.log(output) // <-- the output is changed
}, [output]);

这应该有效:)

如何在函数触发时更新我的 DOM？

How do I update my DOM when the function fires?

javascript

reactjs

redux-form

如何在函数触发时更新我的​​ DOM？

How do I update my DOM when the function fires?

javascript

reactjs

redux-form

如何在函数触发时更新我的 DOM？