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

Question

我有候选人列表作为父母，而候选人列表作为孩子。 在“候选人”列表上，有一个“全选”输入，因此如果选择了候选人并将该状态传递给孩子，我将功能绑定到它以设置状态。 那个部分起作用了，但是仅靠父级“全选”可以更改这些输入本身。

这是它的样子：

候选列表组件（父级）：

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

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

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

此刻，您正在传递道具以说是否进行检查，因此它可以是空函数。

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

也许您应该有一个名为checked的道具，如果选中该道具，请显示一个支票图标，而不是输入。

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

或类似的内容。

Answer 2

您可以基于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 3

这对我有用，但可能不是最佳选择：

checked={isMenuOpen}
onClick={() => toggleDropdown()}
onChange={e => {}}

Answer 4

您是否为所有输入制作了自定义标签？