当前位置: 首页 > 面试题库 >

React Checkbox不发送onChange

融烨磊
2023-03-14
问题内容

TLDR:使用defaultChecked而不是已检查的工作jsbin。

尝试设置一个简单的复选框,该复选框将在选中时划掉其标签文本。由于某些原因,当我使用组件时,不会触发handleChange。谁能解释我在做什么错?

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    console.log('handleChange', this.refs.complete.checked); // Never gets logged
    this.setState({
      complete: this.refs.complete.checked
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            checked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

用法:

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

解:

使用checked不会使基础值(显然)发生变化,因此不会调用onChange处理程序。切换到defaultChecked似乎可以解决此问题:

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    this.setState({
      complete: !this.state.complete
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            defaultChecked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

问题答案:

要获取复选框的选中状态,路径为:

this.refs.complete.state.checked

另一种方法是从传递给handleChange方法的事件中获取它:

event.target.checked


 类似资料:
  • 问题内容: 由于某种原因,我无法将字符“ 3”写入页面上的输入元素。 这段代码: 导致在登录输入中写入“ 1245” …有人可以帮忙吗?我使用python 2.7,最新的chrome和最新的chromedriver 编辑: 也不管用。 -字符串中仅缺少“ 3” … 起作用的是 正如安德森(Andersson)在下文中建议的那样,但这不是解决方案。 我在Google搜索框中进行了尝试,并且遇到了相同

  • 我有一个主干模型,我正试图销毁它,但没有随请求发送任何参数,因此服务器返回一个“Delete 404 not found”错误。 我承认我的结构有点奇怪,因为我正在根据项目是否已经在列表中创建/销毁它们。 销毁前

  • 我正在从浏览器发送如下POST请求: 当请求到达我的后端时,它不包含或头。 我的后端是用于Firebase的Google Cloud函数(基本上只是node.jsendpoint),看起来如下所示: Google Cloud for Firebase函数的控制台日志不包含任何或头。 怎么啦?

  • 我在我的应用程序中使用Google日历API。 我面临的问题是谷歌没有给我发送推送通知。 我在这里设置我的应用程序https://console.developers.google.com/ 已验证域名:https://console.developers.google.com/apis/credentials/domainverification 观看日历:https://developers.

  • 我使用django rest框架作为后端,并试图使用请求标头中的令牌来验证角请求,但角没有发送任何标头值。我已经尝试了所有的方法添加头请求 访问控制请求标头:访问控制允许标头、访问控制允许来源、授权、内容类型访问控制请求方法:GET DNT:1来源:http://localhost:4001推荐人:http://localhost:4001/

  • 我有一个问题,发送跨域会话cookie和搜索后,我得到了更困惑。最初,我在上有一个客户端(Next app),在上有一个api(Express)。发送和保存cookie在localhost上正常工作,但部署后,我遇到了一个问题,默认情况下将设置为。所以我把它改成了。但是我发现需要cookie集中的标志,所以我也改变了这一点。 将设置为后,将不再发送cookie。 如果设置了安全,并且您通过HTTP