Question

这很奇怪，简单的复选框组件状态发生了变化，道具没有并且UI也没有更新！

import React, { Component } from 'react';
import { Checkbox } from 'semantic-ui-react'

export default class UiCheckBox extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: '',
            label: '',
            checked: false
        };
    }

    render() {
        return (
            <Checkbox label={this.props.label} name={this.props.name} checked={this.props.checked} onChange={this.handleChange.bind(this)} />
        );
    }

    handleChange() {
        this.setState({
            checked: !this.state.checked
        });
        console.log("prop:" + this.props.checked);
        console.log("state:" + !this.state.checked);
    }
}

如果我更改

checked={this.props.checked}

对此

checked={this.state.checked}

它可以工作，但是我不能设置复选框的初始值，我在做什么错，PS，我敢肯定这是更早的工作[诚实]？

这就是我的使用方式。

<UiCheckBox name={"Tea"} label={"Tea"} checked={false} />

有想法吗？谢谢

Answer 1

您的handleChange()仅更改this.state.checked。 this.state.checked方法中未使用render()。因此，不会发生可见的变化。

如果要更改props，则必须传递一个function和updates的{{1}}。

其他：您可以使用original data store设置default state。

请参见下面的实际示例

props

// Check Box.
class CheckBox extends React.Component {

  // State.
  state = {checked: this.props.checked}

  // Render.
  render() {
    const {checked} = this.state
    return (
      <React.Fragment>
        <label>{`${checked}`}</label>
        <input type="checkbox" checked={checked} onChange={this.toggle}/>
      </React.Fragment>
    )
  }
  
  // Toggle.
  toggle = event => this.setState(state => ({checked: !state.checked}))
  
}

// Mount.
ReactDOM.render(<CheckBox checked={true}/>, document.querySelector('#root'))

反应复选框未正确更新（语义ui）

1 个答案: