Javascript 失败的属性类型：您为表单字段提供了一个“checked”属性，但没有“onChange”处理程序

我作为父母和孩子都有候选人名单。 在候选者列表上有一个全选输入，所以我将函数绑定到它，以便在候选者被选中时设置状态，并将该状态传递给子级。 一个部分可以工作，但这些输入本身是不可变的，只需通过父选择即可更改

这就是它的样子：

候选名单组件（父级）：

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

类候选列表扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 候选名单：空， 当选候选人：错 } } onSelectCandidatesClick（）{ 这是我的国家({ candidateSelected:！this.state.candidateSelected }); } render（）{ 返回( 此.onSelectCandidatesClick（）}/> 全选 ); } } 候选组件（子组件）：

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

类候选扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
当选候选人：错
}
}
组件将接收道具（下一步）{
这是我的国家({
候选人当选：nextrops.selectCandidate
});
}
render（）{
返回(
);
}
}

---

感谢所有建议和帮助。

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

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

---

或者类似于这些行的内容。

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

类候选扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
当选候选人：错
}
}
onSelectCandidatesClick（）{
这是我的国家({
candidateSelected:！this.state.candidateSelected
});
}
render（）{
返回(
this.onSelectCandidatesClick（）}
选中={this.state.candidateSelected | | this.props.candidateSelected}/>
);
}
}

您是否为所有输入制作了自定义标签 这对我很有效，但可能不是最好的选择：

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

---

是的，您可以而且通常应该有一个onClick处理程序来选择收音机，但是react想要

onchange