reactjs - React 中不同对象的通用设置状态函数

Question

我有一个非常基本的组件，其中包含状态内的 2 个对象。

export default class MainForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time_frame: {},
            event_view: {},
       }
   }
}

如果我的用户单击某个复选框，这些对象中的每一个都包含一个值名称和 true，因此它会构建一个值列表，例如

"event_view": {"app":true, "web":true}

为了处理更改，我创建了每个对象的副本，然后填写用户选择的值，我想知道在 React 中是否有通用的方法来执行此操作？而不必检查event.target.name值

我的方法似乎效率不高。

handleRadioChange(event) {
    let name = event.target.name
    let timeFrameCopy = {...this.state.time_frame};
    let eventViewCopy = {...this.state.event_view};

    if (name === "time_frame") {
        timeFrameCopy[event.target.value] = true
        this.setState({
            [name]: timeFrameCopy,
        }, this.checkState)
        return
    }

    if (name === "event_view") {
        eventViewCopy[event.target.value] = true
        this.setState({
            [name]: eventViewCopy,
        }, this.checkState)
        return
    }
}

Answer 1

你可以试试这个，也可以保存你以前的状态

this.setState(prevState => ({
  ...prevState,
  [name]: value
}))