如何根据单选按钮上的选择重置文本字段的值？

Question

我有男性和女性的这些单选按钮。如果用户单击 'male '，将出现消息的文本字段。问题是，如果我选择 male 然后输入消息，下次我会选择 female，文本字段 msg 的值仍然存在。我怎样才能把它改回什么都没有？

即使我已经点击了，消息仍然存在'male'

codesandbox: https://codesandbox.io/s/radio-button-cn9708?file=/demo.js

代码：

export default function ControlledRadioButtonsGroup() {
  const [value, setValue] = React.useState("female");

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

  const [msg, setMsg] = React.useState("");

  return (
    <div>
      <FormControl>
        <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
        <RadioGroup
          aria-labelledby="demo-controlled-radio-buttons-group"
          name="controlled-radio-buttons-group"
          value={value}
          onChange={handleChange}
        >
          <FormControlLabel value="female" control={<Radio />} label="Female" />
          <FormControlLabel value="male" control={<Radio />} label="Male" />
        </RadioGroup>
      </FormControl>
      {value === "male" && (
        <TextField
          label="msg"
          value={msg}
          onChange={(e) => setMsg(e.target.value)}
        />
      )}
      {msg} - Message
    </div>
  );
}

我试过这个：

  if (value === "female") {
    setMsg("");
  }

但这将显示为：

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Answer 1

你必须将这部分包装到 useEffect 钩子中

  React.useEffect(() => {
    if (value === "female") {
      setMsg("");
    }
  }, [value])

Answer 2

尝试使用 useEffect 挂钩：

useEffect(() => { value === 'female' && setMsg('') }, [value])

第二个参数([value])中的数组指定依赖项。如果任何依赖项发生更改，将触发效果。请记住，它只进行浅层比较。

https://reactjs.org/docs/hooks-effect.html

Answer 3

将其放入 handleChange 处理程序中：

  const handleChange = (event) => {
    if (event.target.value === "female") {
      setMsg("");
    }
    setValue(event.target.value);
  };

Answer 4

你只需要使用useEffect:

  React.useEffect(() => {
    if (value === "female") {
      setMsg("");
    }
  }, [value]);

如何根据单选按钮上的选择重置文本字段的值？

How do I reset the value of the textfield based on what chosen on the radio button?

javascript

reactjs

material-ui