Блог

Главная - Вопросы по программированию - Поместить запрос в переключатель пользовательского интерфейса Material

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

#javascript #reactjs #redux #material-ui

#javascript #reactjs #redux #материал-пользовательский интерфейс

Вопрос:

Я создаю переключатель, который считывает проверенное значение из значения, которое я извлекаю из серверной части, и когда пользователь переключает его, на серверную часть отправляется запрос 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);
};

Комментарии:

1. Я предполагаю, что value={this.toggleValue() должно быть value={this.toggleValue} ?

2. только что внес некоторые правки в мой пост @ChrisG

Ответ №1:

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

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

Комментарии:

1. Я получаю это предупреждение об ошибке: компонент изменяет флажок «неконтролируемый ввод типа», которым нужно управлять. Элементы ввода не должны переключаться с неконтролируемого на контролируемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента.

2. Это потому, что вы получаете проверенное значение Switch компонента из реквизитов, и когда оно меняется, вы обновляете состояние. Попробуйте настроить checked={this.state.toggleValue} в вашем Switch компоненте.

3. Тогда как бы я показал состояние переключателя, полученного из серверной части, когда пользователь посещает эту страницу. После этого мне нужно отправить ответ put при переключении. Можете ли вы помочь мне с этим

4. На самом деле вам нужно решить, используете ли вы переменную в состоянии вашего компонента для получения / установки проверяемого значения переключателя (контролируемый режим) или вы управляете им вручную, например, с помощью реквизитов (неконтролируемый режим). Здесь вы получаете ошибку, потому что вы смешиваете контролируемый и неконтролируемый режимы. (Установка значения в состояние и получение его из реквизитов).

5. Решением могло бы быть помещать значение из props в ваш state каждый раз, когда оно изменяется (в componentDidUpdate ), а затем использовать значение в состоянии в вашем Switch .