更新 React 组件中的默认值答案

【问题标题】：Update default value in React component更新 React 组件中的默认值
【发布时间】：2021-03-25 21:32:13
【问题描述】：

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

我在post 中看到 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;

这里是an example

【问题讨论】：

defaultValue 属性通常用于非受控输入，而value 用于受控输入。这些都与值的来源无关，无论是本地组件状态还是某些 redux 存储。你在哪里将你的组件连接到一个 redux 存储以获取价值？ that Input 组件如何处理这些道具中的任何一个？根据您对值的本地状态的使用，我假设您打算使用受控输入，因此您获得的任何值都应传递给 Input 的 value 属性。
我从 redux 存储中获取值，该存储从 api 调用中获取值，因此在我的程序中输入值类似于 props.value。那么用户应该能够更新该值。这不起作用（参见示例）
您的示例未使用 redux 存储，因此我不确定它的示例是否有效。第一个输入是受控的，没有onChange 处理程序，因此它在超时后被您设置的内容卡住，第二个是不受控制的，因此它不会响应value 状态的变化。
我用 timeout 模拟了redux store，我觉得重现问题就够了
确实不是。 Redux 不使用超时，也不是异步的。您是否正在尝试模拟 some 异步获取的存储在您的 redux 状态中的初始值？如果值是在输入挂载后加载的，请使用受控输入、状态和value 属性，并添加onChange 处理程序以便您可以更改它。如果等到初始值准备好才渲染输入，请使用不受控制的输入和defaultValue 属性。

标签： javascript reactjs fluent-ui fluentui-react

【解决方案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;

【讨论】：

在这里检查你的例子，当我更新输入和重新渲染组件codesandbox.io/s/fluent-ui-example-forked-kin7z