React 复选框控制组件答案

【问题标题】：React Checkbox Controlled ComponentReact 复选框控制组件
【发布时间】：2020-05-02 12:52:37
【问题描述】：

这快把我逼疯了。我对选择下拉菜单和文本字段没有任何问题，但由于某种原因，我无法让复选框以受控方式工作。我希望他们“切换”并在父组件中收听此事件。

我知道复选框类型的输入有一个“已检查”属性。选择一个复选框会赋予它“on”的值。我将这个“on”值转换为真或假，并相应地更新组件。

由于某种原因，我无法让它工作，要么它总是被选中，要么它从未被选中（如果我切换布尔开关）。

export class ControlledCheckbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      select: false,
    };
  }

  render() {
    console.info("this.state.select - " + this.state.select);

    let sel = false;

    if (this.state.select !== "on") {
      sel = true;
    } else {
      sel = false;
    }

    return (
      <div>
        <input
          type="checkbox"
          checked={sel}
          onChange={this.handleChangeCheckbox}
        />
      </div>
    );
  }

  handleChangeCheckbox = (e) => {
    console.info("here e.currentTarget.value " + e.currentTarget.value);

    this.setState({
      select: e.currentTarget.value,
    });
    //call passed through callback here
  };
}

【问题讨论】：

codesandbox.io/s/objective-tereshkova-tcdq9?file=/src/App.js

标签： javascript reactjs

【解决方案1】：

value serves a different purpose 用于checkbox 输入，您不应使用它来定义您的状态值。您需要查看e.currentTarget.checked。

export class ControlledCheckbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      select: false,
    }
  }

  handleChangeCheckbox = e => {
    this.setState({
      select: e.currentTarget.checked // <--
    })
  }

  render() {
    return (
      <div>
        <input type="checkbox"
          checked={this.state.select}
          onChange={this.handleChangeCheckbox} />
      </div>
    );
  }
}

如果您使用多个输入（不仅是复选框），您可以遵循react docs 建议的方法，您可以只使用一个setState 覆盖多种输入类型。请记住在这种情况下定义 name，以便您可以分隔输入：

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
}

render() {
    return (
      <div>
        <input type="checkbox"
          name="hasValue"
          checked={this.state.select}
          onChange={this.handleChangeCheckbox} />
      </div>
    );
}

【讨论】：

【解决方案2】：

您的问题是关于受控输入，但您的复选框尚未受控。您依赖于存储在复选框内的值，而不是状态内。

this.setState({
   select: e.currentTarget.value, // here
});

改用来自该州的value。

this.setState((prevState) => ({
   select: !prevState.select,
}));

注意：您可以从render中删除条件，它们是多余的。

【讨论】：