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

Question

我有候选人名单作为父母和候选人作为孩子。在候选列表上有一个全选输入，所以我将函数绑定到它以设置状态，如果候选被选中并将该状态传递给孩子。该部分有效，但这些输入本身不可变，仅由父级 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>
    );
  }
}

感谢所有建议和帮助。

原文由 liborza 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 antonini 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

我个人认为这在任何情况下都是错误的做法。它不是输入，因为用户没有直接向该元素输入任何内容。

也许你应该有一个名为 checked 的道具，如果它被选中，那么显示一个复选 图标 而不是输入。

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

或类似的规定。

原文由 liamgbs 发布，翻译遵循 CC BY-SA 4.0 许可协议