无法更改对象中的值

IT技术 reactjs
2021-05-11 00:16:38

我的目标是将对象的值更改为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 写什么来只更改对象内的值。

任何人都可以帮助我进行此查询吗？

3个回答
       <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}
/>

Ciao，你可以使用这样的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))}/>
...
其它你可能感兴趣的问题
上一篇什么是用于检查属性是否适用的 Reacts 函数？ 下一篇react-native: <Picker> 在更改 <Picker.Item> 标签时丢失 selectedValue