失敗的道具類型：您在沒有“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

您需要為子組件中的復選框輸入提供一種根據輸入事件處理其更改的方法。

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

目前你正在傳入 props 來說明它是否被選中，所以它可以是一個空函數。

我個人認為無論如何這是錯誤的方法。 這不是輸入，因為用戶沒有直接向該元素輸入任何內容。

也許你應該有一個叫做checked的道具，如果它被選中，那么顯示一個檢查圖標而不是輸入。

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

或類似的規定。

Answer 3

這對我有用，但可能不是最佳選擇：

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

Answer 4

您是否為所有輸入制作了自定義標簽？ 😃這讓我之前