Блог

Моя цель — изменить значение объекта на 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 для checkbox, чтобы изменять значение только внутри объекта.

Кто-нибудь может мне помочь в этом запросе?

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

Учитывая, что ваше состояние в конечном итоге выглядит как

 this.state = {
  demo: {
    id: "12497wewrf5144",
    name: "ABC",
    isVisible: "false",
    value: false
  }
};
  

Вы можете создать обработчик изменений как таковой

 changeHandler = e => {
  e.preventDefault();
  const { checked } = e.target;
  this.setState(prevState => ({
    ...prevState, // <-- spread existing state
    demo: {
      ...prevState.demo, // <-- spread existing demo
      value: checked, // <-- save the input's checked value
    }
  }))
}
  

Присоедините changeHandler к onChange обратному вызову события

 <input
  type="checkbox"
  onChange={this.changeHandler}
  value={this.state.demo.value}
/>
  

Чао, ты мог бы использовать onClick событие, подобное этому:

 ...
handleClick = (e, data) => {
    const demo = { ...this.state.demo };
    demo.isVisible = !demo.isVisible;
    this.setState({ demo });
}

...
<input type="checkbox" value={this.state.demo.value} onClick={((e) => this.handleClick(e, data))}/>
...