失败的道具类型：您在没有“onChange”处理程序的情况下向表单字段提供了“已检查”道具

Question

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

这是它的样子：

CandidateList 组件（父）：

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>
    );
  }
}

感谢所有建议和帮助。

Answer 1

您可以根据 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>
    );
  }
}

Answer 2

您必须将arrtibute readOnly 设置为输入标签。

<input type="checkbox" readOnly />

Answer 3

您需要为子组件中的复选框输入提供一种根据输入事件处理其更改的方法。

<input checked={this.state.candidateSelected} onChange={e => {}} />

目前你正在传入 props 来说明它是否被选中，所以它可以是一个空函数。

我个人认为无论如何这是错误的方法。这不是输入，因为用户没有直接向该元素输入任何内容。

也许您应该调用一个道具checked，如果它被选中，则显示一个检查图标而不是输入。

{ this.props.checked ? <div className="checked"></div> : <div className="unchecked"></div>}

或类似的规定。