reactjs - 无法更改对象中的值

Question

我的目标是将对象的值更改为true或false同时更改复选框。

对象包含：

{
  id: '12497wewrf5144',
  name: 'ABC',
  isVisible: 'false'
}

这是代码：

import React, { Component } from 'react'

class Demo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      demo: {}
    }
  }

  componentDidMount() {
    axios
      .get('/api/random')
      .then(res => {
        this.setState({ demo: res.data?.[0] })
      })
      .catch(error => {
        console.log(error)
      })
  }
  render() {
    return (
      <div>
        <h1>{this.state.demo.name}</h1>
        <input type="checkbox" value={this.state.demo.value} />
      </div>
    )
  }
}

export default Demo

我不知道在 onchange 方法中为复选框写什么来仅更改对象内的值。

任何人都可以在这个查询中帮助我吗？

标签： reactjs

Answer 1

       <input
          type="checkbox"
          value={this.state.demo.value}
          onChange={(event) => {
            this.setState((prevState) => ({
              ...prevState,
              demo: { ...prevState.demo, isVisible: event.target.checked }
            }));
          }}
        />