REACT - defaultChecked 不在第二次加载时呈现检查属性

Question

我的组件在我第二次访问 /view/:id 时不检查收音机。我从站点索引处的 react-router 开始我的列表组件，我单击一个元素的查看按钮，选中无线电，我 return 在我的列表中转到另一个或相同的元素和它不再被检查了。当我在 React 开发人员工具中检查组件时，收音机具有 defaultChecked=true 属性.

import React from 'react';
import { connect } from 'react-redux';

class LicenseRadios extends React.Component {
  buildRadios() {
    let { licenses, activeValue } = this.props;

    return licenses.map(license => {
      let checked = false;

      if(activeValue !== undefined && activeValue === license.id){
        checked = true;
      }

      return (
        <div key={license.id} className="col l2">
          <p>
            <input name="license" type="radio" id={'licenseRdo_' + license.id} value={license.id} defaultChecked={checked} />
            <label htmlFor={'licenseRdo_' + license.id}>{license.label}</label>
          </p>
        </div>
      );
    });
  }

  render() {
    return (
      <div className="row">
        {this.buildRadios()}
      </div>
    );
  }
}

export default LicenseRadios;

我试图为 checked 属性更改 defaultChecked，但它需要一个 onChange 事件。我不明白这个问题。有人可以帮我吗？

谢谢

Answer 1

defaultChecked 道具仅在初始渲染期间使用。如果需要在后续渲染中更新值，则需要使用 onChange 函数来处理值更改。

查看文档中的 controlled components 以更好地了解您遇到的问题。

Answer 2

通过将 true 或 false

设置为 defaultChecked 和 re-render 的初始值，使用“未定义”

const Example = () => {

  [checked,setChecked] = useState(undefined);
  
  useEffect(()=>{
  
    // fetch data
    
    setChecked(true);
  
  });
  
  return (
    <input type="checkbox" defaultChecked={checked} onClick={(e)=> changeValue(e)}/>
  );

}

REACT - defaultChecked 不在第二次加载时呈现检查属性

REACT - defaultChecked don't render check attribute on second load

radio-button

reactjs

react-jsx

react-router