javascript - react 复选框未正确更新(语义 ui)

Question

这很奇怪，简单的复选框组件状态发生变化，prop 没有，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:你必须传递一个函数来更新原始数据存储.

否则:您可以使用 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'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>