当使用 useState 钩子设置 onChange 时，RadioGroup 将不会选择

Question

我有一个工作得非常好的 RadioGroup。当我将 RadioGroup 移动到它自己的函数中时，“选择”不起作用。就好像组件无法完全重新渲染一样。当我附加onChange使用状态挂钩的事件时会发生这种情况。您可以在这里看到，无线电 1 和 2 运行良好。无线电 3 和 4 没有。

CodeSandbox 材质 UI RadioBox 示例

这是我正在使用的组件。未包装到函数中的 RadioGroup 效果很好。那就是——它不“选择”。意味着黑点不会出现在选择单选按钮中。

function Demo(props) {
  const [inputs, setInputs] = useState({});

  const handleInputChange = event => {
    event.persist();
    setInputs(inputs => ({
      ...inputs,
      [event.target.name]: event.target.value
    }));

    console.debug(`${event.target.name}: ${event.target.value}`);
  };

  const NotWorking = props => {
    return (
      <RadioGroup aria-label="two" name="two" row onChange={handleInputChange}>
        <FormControlLabel
          value="3"
          control={<Radio color="primary" />}
          label="3"
          labelPlacement="end"
        />
        <FormControlLabel
          value="4"
          control={<Radio />}
          label="4"
          labelPlacement="end"
        />
      </RadioGroup>
    );
  };

  return (
    <React.Fragment>
      <RadioGroup aria-label="one" name="one" row onChange={handleInputChange}>
        <FormControlLabel
          value="1"
          control={<Radio color="primary" />}
          label="1"
          labelPlacement="end"
        />
        <FormControlLabel
          value="2"
          control={<Radio />}
          label="2"
          labelPlacement="end"
        />
      </RadioGroup>
      <NotWorking />
    </React.Fragment>
  );
}

非常感谢您的帮助。

Answer 1

您的包装组件必须接受onChange处理程序作为道具，以及inputs. 此外，您可以将其移到父组件之外以获得更好的可读性：

const NotWorking = props => {
    return (
      <RadioGroup aria-label="two" name="two" row onChange={props.onChange}>
        <FormControlLabel
          value="3"
          control={<Radio color="primary" />}
          label="3"
          labelPlacement="end"
        />
        <FormControlLabel
          value="4"
          control={<Radio />}
          label="4"
          labelPlacement="end"
        />
      </RadioGroup>
    );
  };


function Demo(props) {
  const [inputs, setInputs] = useState({});

  const handleInputChange = event => {
    event.persist();
    setInputs(inputs => ({
      ...inputs,
      [event.target.name]: event.target.value
    }));

    console.debug(`${event.target.name}: ${event.target.value}`);
  };

  return (
    <React.Fragment>
      <RadioGroup aria-label="one" name="one" row onChange={handleInputChange}>
        <FormControlLabel
          value="1"
          control={<Radio color="primary" />}
          label="1"
          labelPlacement="end"
        />
        <FormControlLabel
          value="2"
          control={<Radio />}
          label="2"
          labelPlacement="end"
        />
      </RadioGroup>
      <NotWorking onChange={handleInputChange} />
    </React.Fragment>
  );
}