javascript - 失败的 Prop 类型 : You provided a `checked` prop to a form field without an `onChange` handler

Question

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

感谢所有建议和帮助。

Answer 1

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

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

目前，您正在传递 Prop 以说明它是否已检查，因此它可以是一个空函数。

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

也许你应该有一个名为 checked 的 Prop 如果选中，则显示检查 图标 而不是输入。

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

或类似的规定。