флажок реагировать не обновляется должным образом (sematic ui) - PullRequest
Новая
       4

флажок реагировать не обновляется должным образом (sematic ui)

0 голосов
/ 06 июля 2018

Это странно, простой флажок изменяет состояние компонента, проп не изменяет и пользовательский интерфейс не обновляется! 

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} />

Идея есть у кого? Спасибо

1 Ответ

0 голосов
/ 06 июля 2018

Ваш handleChange() меняется только this.state.checked. this.state.checked не используется в вашем render() методе. Таким образом, никаких видимых изменений не происходит.

Если вы хотите изменить props: вам нужно будет передать function, что updates, 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'))
<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>
...