Разместите запрос на переключателе пользовательского интерфейса материала

Question

Я создаю переключатель, который считывает проверенное значение из значения, полученного из бэкэнда, и когда пользователь переключает его, в бэкэнд отправляется запрос PUT для обновления выбора.

Это то, что у меня пока есть, тумблер не отображает ответ, чего мне здесь не хватает

class Test extends Component {
constructor(props) {
    super(props);
    this.state = {
        toggleValue: ''
    }
}

componentDidMount() {
        this.props.getToggleValue();
}

toggleValue = () => {
    if(this.props.value){
       return this.props.value.toggleValue
    }
}

handleChange(field) {
    return (event) => {
        this.setState({
            [field]: event.target.value,
        });
    }
}

render() {
    return (
        <>
         <Switch value={this.state.toggleValue} checked={this.toggleValue()} onChange={this.handleChange('toggleValue')} />
        </>
    )
}

const mapStateToProps = (state, ownProps) => {
    return {
      ...ownProps,
      value: state.testReducer.value
    };
  }

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getToggleValue
    }, dispatch);
};

Answer 1

Вы должны проверить на event.target.checked, а не event.target.value

handleChange(field) {
    return (event) => {
        this.setState({
            [field]: event.target.checked,
        });
    }
}