一个组件正在更改复选框类型的不受控制的输入以在 React JS 中进行控制答案

【问题标题】：A component is changing an uncontrolled input of type checkbox to be controlled in React JS一个组件正在更改复选框类型的不受控制的输入以在 React JS 中进行控制
【发布时间】：2019-06-19 06:20:55
【问题描述】：

警告：组件正在更改复选框类型的不受控制的输入以进行控制。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

我的代码：

      interface IState {
      isSelectedAll: boolean;
      selected: any;
      confirmDelete: boolean;
      confirmSignStatus: boolean;
      petitionId: any;
      items: any;
      verificationCode: any;
    }
...
    /**
     * Default state.
     */
    function getDefaultState(): IState {
      return {
        isSelectedAll: false,
        selected: {},
        confirmDelete: false,
        confirmSignStatus: false,
        petitionId: '',
        items: [],
        verificationCode: null,
      };
    }

  public handleSelect = (id: number) => {
    let selectedObj = Object.assign({}, this.state.selected);
    selectedObj[id] = !selectedObj[id];
    this.setState({ selected: selectedObj });
  }
...

  public state: IState = getDefaultState();


 public componentWillReceiveProps(nextProps: any): void {
    if (nextProps.ecourtListBranch.data) {
      this.initSelects(nextProps.ecourtListBranch.data);
    }
  }

      private initSelects = (data: any): void => {
        let selectedObj: any = {};
        data.map((item: IPetitionView) => {
          selectedObj[item.petitionId] = false;
          this.setState({ selected: selectedObj });
        });
      }

interface IProps {
  ecourt: IPetitionView;

  ecourtActions: typeof EcourtActions;

  handleSelect: (id: number) => any;

  selecteds: any;

  handleDeletePetition: (petitionId: number) => any;

  handleEditPetition: (petitionId: number) => any;
}

...

<Checkbox
  value={this.props.selecteds[petitionId]}
  onChange={() => handleSelect(petitionId)}
 />

【问题讨论】：

标签： reactjs typescript error-handling warnings

【解决方案1】：

这意味着 this.props.selecteds[petitionId] 有时是未定义的。您可以做的一件事是像这样为复选框提供默认值。

<Checkbox
  value={this.props.selecteds[petitionId] || false}
  onChange={() => handleSelect(petitionId)}
 />

警告说明：不要使用 defaultValue 属性，因为它会使您的组件不受定义控制。

【讨论】：