RadioGroup не будет выбирать, когда onChange установлен, который использует ловушку useState

Question

У меня есть радиогруппа, которая прекрасно работает. В ту минуту, когда я перемещаю эту RadioGroup в ее собственную функцию - «выбор» не работает. Как будто компоненты не в состоянии полностью перерисовать. Это происходит, когда я присоединяю событие onChange, которое использует хук состояния. Вы можете видеть здесь, радио 1 и 2 работают хорошо. Радиоприемники 3 и 4 этого не делают.

Код пользовательского интерфейса CodeSandbox Пример 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>
  );
}

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;

Демо