javascript - 更新 React 组件中的默认值

Question

我想根据存储在 redux 中的值在Input上设置默认值。

我在这篇文章中看到 defaultValue 仅用于第一次渲染。

所以我尝试使用，value然后问题是我无法改变它的价值。

import React, { useState } from "react";
import { Input } from "@fluentui/react-northstar";
const InputExample = () => {
  const [value, setValue] = useState("");
  const getText = () => {
    return setTimeout(() => setValue("blablabla"), 3000);
  };
  getText();

  return (
    <>
      <Input value={value} />
      <br />
      <br />
      <Input defaultValue={value} />
    </>
  );
};

export default InputExample;

这是一个例子

Answer 1

您需要添加一个 onChange 处理程序来处理对输入所做的更改

import React, { useState } from "react";
import { Input } from "@fluentui/react-northstar";

const InputExample = () => {
  const [value, setValue] = useState("");
  const getText = () => {
    return setTimeout(() => setValue("blablabla"), 3000);
  };
  getText();

  const handleChange = event => {
    setValue(event.target.value)
}

  return (
    <>
      <Input value={value} onChange={handleChange} />
      <br />
      <br />
      <Input defaultValue={value} />
    </>
  );
};

export default InputExample;