React 复选框控制组件

Question

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

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

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

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

Answer 1

value用于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>
    );
}

Answer 2

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

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

请改用来自 state 的value 。

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

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