Question

reactjs类中的状态不会改变，尽管我使用了setState，返回了一个Object并在构造函数中绑定了函数，但这是我的代码

export default class Vacations extends Component {
    constructor(props){
        super(props);
        this.state = {
            sat: false,
            sun: true,
            mon: false,
            tue: false,
            wed: false,
            thu: false,
            fri: false
        }
        this.handleEnabledChange = this.handleEnabledChange.bind(this);
    }

    handleEnabledChange(e){
        const targetName = e.target.name;
        const checkState = e.target.checked;
        console.log(targetName, checkState);
        this.setState((preState)=>{
            return Object.assign({},{
                ...preState,
                name: !checkState
            })
        }) 
    }

    render() {
    return (
      <div>        
        <Checkbox name="sat" checked={this.state.sat} label="Saturday" onChange={this.handleEnabledChange} disabled/>
        ...
      </div>
    )
  }
}

有人可以帮我修复它吗？

Answer 1

状态已更改，但是您要向状态添加新属性name：

return Object.assign({},{
    ...preState,
    name: !checkState
})

您没有更改sat的值，这就是为什么您的组件不显示任何可见更新的原因。请注意，您永远不会使用targetName。

您应该这样做：

this.setState({[targetName]: !checkState});

不需要使用回调，因为您不需要从先前的状态读取，也不必手动合并先前的状态，React会为您完成。

Answer 2

简单点

handleEnabledChange(e){
    const targetName = e.target.name;
    const currentState = this.state[targetName]

    this.setState({
      [targetName]: !currentState
    })
}

我还注意到您在复选框上有disabled个道具。复选框事件不会针对禁用的控件触发。

reactjs中的状态不会改变

2 个答案: