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

Question

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

CodeSandbox Material UI RadioBox Example

这是我正在使用的组件。未包装到函数中的 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>
  );
}

Answer 2

您实际上并没有在任何地方使用您的输入。您需要指定值。否则你会得到一个不受控制的无线电组（它应该在这两种情况下都可以工作，但显然由于某种原因我还没有弄清楚）。

但是，您可以通过以下方式使其工作并且能够通过查看状态来判断选择了什么：

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" value={inputs.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" value={inputs.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>
  );
}

export default Demo;

Demo