时间戳

首页 > 解决方案 > 失败的道具类型：您在没有 `onChange` 处理程序的情况下向表单字段提供了 `checked` 道具

javascript - 失败的道具类型：您在没有 `onChange` 处理程序的情况下向表单字段提供了 `checked` 道具

问题描述

我有作为父母的候选人名单和作为孩子的候选人。在候选人列表上有一个全选输入，因此我将函数绑定到它以设置状态，如果候选人被选中并将该状态传递给孩子。这一部分有效，但这些输入本身并不可变，仅通过父 Select All 可以更改。

这是它的样子： 在此处输入图像描述

候选列表组件（父级）：

class CandidateList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      candidateList: null,
      candidateSelected: false
    }
  }

  onSelectCandidatesClick() {
    this.setState({
      candidateSelected: !this.state.candidateSelected
    });
  }

 render() {
    return (
      <div className="CandidateList">
        <div className="__selection">
          <input className="checkbox" type="checkbox" id="selectAll" onClick={() => this.onSelectCandidatesClick()}/>
          <label htmlFor="selectAll"><span id="__label">Select All</span></label>
        </div>
      </div>
    );
  }
}

候选组件（子）：

class Candidate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      candidateSelected: false
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      candidateSelected: nextProps.selectCandidate
    });
  }

  render() {
    return (
      <div className="Candidate">
        <div className="__select">
          <input className="checkbox" type="checkbox" id="candidate" data-candidate-id={this.props.candidateData.id} checked={this.state.candidateSelected} />
          <label htmlFor="candidate"></label>
        </div>
      </div>
    );
  }
}

感谢所有建议和帮助。

标签： javascriptreactjs

解决方案

您可以根据 props.candidateSelected （如果从父级选择全选）或基于状态（如果从子级选择复选框）设置子级的选中值

您必须添加一个 onclick 事件处理程序，该处理程序将在单击子项中的复选框时更改状态

class Candidate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      candidateSelected: false
    }
  }

  onSelectCandidatesClick() {
    this.setState({
      candidateSelected: !this.state.candidateSelected
    });
  }

  render() {
    return (
      <div className="Candidate">
        <div className="__select">
          <input className="checkbox" type="checkbox" id="candidate" data-candidate-id={this.props.candidateData.id} 
          onClick={() => this.onSelectCandidatesClick()}
          checked={this.state.candidateSelected || this.props.candidateSelected} />
          <label htmlFor="candidate"></label>
        </div>
      </div>
    );
  }
}

推荐阅读