Question

我当前正在运行一个带有以下复选框的React应用：

<input name="~" classsName="~" type="checkbox" onChange={this.onToggle}/>

onToggle函数如下所示：

onToggle = (e) => {
    const { value } = suppressEvent(e).target;
    const newState = {...this.state, checkboxOn:value}
    this.setState(({ newState }) => ({ newState: !newState}));
}

问题在于，在网页上，此复选框仅在每次单击两次后才切换其状态。关于单击后如何切换的任何想法？在此先感谢：）

Answer 1

要解决您的问题，请尝试像这样重写组件：

import koalas as ks
spark_df = ks.from_pandas(pandas_df)

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true
    };
    this.onToggle = this.onToggle.bind(this);
  }

  onToggle() {
    this.setState((prevState) => {
      return { checked: !prevState.checked };
    });
  }

  render() {
    return (
      <div>
        <div>
          <input name="~" className="~" type="checkbox" checked={this.state.checked} onChange={this.onToggle} />
          <label htmlFor="~">Checkbox</label>
        </div>
        <pre>{JSON.stringify({ state: this.state }, null, 2)}</pre>
      </div>
    );
  }
}

ReactDOM.render(<Checkbox />, document.getElementById("root"));

.App { font-family: sans-serif; }
pre { background: #efefef; padding: 20px; }

复选框每次需要单击两次才能检查

1 个答案: