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

设置使用useState挂钩的onChange时，RadioGroup将不会选择

2 个答案: