单选按钮和ReactJs钩子没有调用onChange函数。

Question

cl state is not updating. onChange method is not getting called ?

Answer 1

下面的片段显示，它确实按照预期工作。只删除了样式。

const { useState } = React;

const Example = () => {
  const [cl, setCl] = useState('');
  console.log(cl)

  return (
    <div>
      <label>
        <input
          type="radio"
          name="test"
          value="FEW"
          checked={cl === 'FEW'}
          onChange={() => setCl("FEW")}
        />
        FEW
      </label>
      <label>
        <input
          type="radio"
          name="test"
          value="SCT"
          checked={cl === 'SCT'}
          onChange={() => setCl("SCT")}
        />
        SCT
      </label>
    </div>
  );
}
ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

这个问题是由于data-toggle属性造成的。我删除了它，它开始工作。