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

Posted

技术标签:

【中文标题】REACT - defaultChecked 在第二次加载时不呈现检查属性【英文标题】:REACT - defaultChecked don't render check attribute on second load 【发布时间】:2016-01-12 21:36:54 【问题描述】:

当我第二次访问 /view/:id 时,我的组件不会检查收音机。我从站点索引处的 react-router 列表组件开始,单击元素的查看按钮,选中收音机,返回列表并转到另一个或相同的元素,但不再检查.当我在 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;

我尝试更改 defaultCheckedchecked 属性,但它需要 onChange 事件。我不明白这个问题。有人可以帮帮我吗?

谢谢

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

这没有回答在重新渲染组件时如何预先检查收音机的问题。在这种情况下不会触发onChange 操作

以上是关于REACT - defaultChecked 在第二次加载时不呈现检查属性的主要内容,如果未能解决你的问题,请参考以下文章

在 React 中更改路由更改的状态

反应复选框不发送 onChange

React + Redux:为啥在第三次加载时填充道具?

React/Redux 在第一个动作完成后立即触发动作

React/Redux 状态在第二次操作调用时为空

React 状态数据未在第一个组件渲染时显示