Question

我有一个ReactJS复选框组件。调用onChange时，我可以记录新状态并看到它发生变化，但它实际上从未将复选框重新呈现为新状态。因此永远不会调用ADD_ID操作。请参阅以下代码：

  class CheckBox extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        checked: true
      }
    }

    changing = (e) => {
      this.setState(prevState => ({checked: !prevState.checked}), () => {
        console.log(this.state.checked); // false
        this.state.checked
          ? store.dispatch({ type: 'ADD_ID', id: this.props.id })
          : store.dispatch({ type: 'REMOVE_ID', id: this.props.id });
      });
    }

    render() {
      return (
        <label>
          Include
          <input onChange={this.changing} checked={this.state.checked} type='checkbox'/>
        </label>
      )
    }
  }

是否有生命周期挂钩我必须打电话？我认为组件会在它的道具或状态变化时重新渲染，在这种情况下，如console.log(this.state.checked)所示，状态已经改变，但组件没有变化。重新渲染。

Answer 1

event已经有checked属性。你以一种有点奇怪的方式做这件事。

将您的功能更改为：

handleChange = (e) => {
      const isChecked = e.target.checked
      if(isChecked){
        store.dispatch({type:'ADD_ID', id:this.props.id})
      } else {
        store.dispatch({type:'REMOVE_ID', id:this.props.id})
      }
      this.setState(checked: isChecked)
    }

然而，您在同时使用内部状态和Redux时仍然很奇怪。您可能想在此重新考虑您的方法。

在表单上反应文档，我建议您在5分钟内阅读： https://reactjs.org/docs/forms.html

ReactJS，Checkbox没有

1 个答案: