1
votes

setState () dans React ne met pas à jour l'état onClick Switch (antd)

Lorsque nous cliquons sur le commutateur, l'état "valueState" ne se met pas à jour, je ne sais pas pourquoi ??

Aussi, j'ai un problème de type "statusValue" car "switch antd" accepte le booléen par contre la valeur initiale des accessoires est de type number

Voici le code que j'utilise:

// Code //

import React from 'react';
import { Form, Input, Switch } from "antd";
class UpdateCard extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        valueState: this.props.state.status,
    }
}

handleToggle = (checked) => {
    console.log("state",this.state.valueState);
    console.log("checked",checked);
   if (checked === false){
    this.setState({
        valueState:1
      });
   }else {
    this.setState({
        valueState:0
      });
   }
    console.log("handleToggle valueState",this.state.valueState);
  };

  render() {
    const { state } = this.props;

    var statusValue = false;

    if (state.status === 0) { statusValue = true; }
  return (
  <Form id='update-state-form' 
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            initialValues={{
                name: state ? state.name : '',
                status: state ? state.status : false,
                color: state ? state.color :'',
            }}
        >
            <FormItem {...formItemLayout} 
               name="name" 
               label={<IntlMessages id="app.stateName" />} 
               rules={[{ required: true, message: 'Please input the name !' }]} 
            >
                <Input />
            </FormItem>

            <FormItem {...formItemLayout} 
               name="color" 
               label={<IntlMessages id="app.color" />} 
               rules={[{ required: true, message: 'Please input the color !' }]}
            >
                <CirclePicker color={state.color} />
            </FormItem>

            <FormItem {...formItemLayout} 
               name="status" 
               label={<IntlMessages id="app.status" />} 
               rules={[{ required: true, message: 'Please input the status !' }]}
            >
                <Switch  defaultChecked={statusValue}  onClick={this.handleToggle}/>
            </FormItem>
        </Form>
    );
}
}
export default connect(
 null,
  {
     updateStateCardAction,
  }
 )(UpdateCard );

// ****************************** Afficher console.log ************** **************** //

javascript reactjs antd switch-statement setstate

2 commentaires

qu'est-ce que statusValue dans le commutateur?

Il y a 2 choses, lorsque vous appelez this.handleToggle (), vous ne passez aucune valeur en tant que paramètre et setState () est asynchrone, alors gardez cela à l'esprit. De plus, onClick est simplement passé comme accessoire au composant Switch, alors assurez-vous de suivre la documentation de 'antd', je n'ai personnellement pas utilisé cette bibliothèque :)

3 Réponses :

0
votes

vous devez également transmettre la valeur.

<Switch  defaultChecked={statusValue}  onClick={(statusValue) =>this.handleToggle(!statusValue)}/>

0 commentaires

0
votes

Je sens que vous manquez sur deux choses principales ici tant que j'ai compris votre problème:

statusValue n'a pas été déclaré dans l'état. Et ce devrait être une valeur booléenne dans l'état. À partir de la documentation d'Ant-Design, le paramètre defaultChecked est défini sur false. Assurez-vous d'abord de déclarer statusValue comme variable d'état:
```
 <Switch  
      defaultChecked={this.state.statusValue}  
      onClick={()=>this.handleToggle(this.state.statusValue)}
  />
```

Ensuite, vous devez vous assurer de transmettre l'état statusValue dans le gestionnaire onClick .

this.state = {
 valueState: this.props.state.status,
 statusValue:false
}

... // and keep state in sync with the UI

4 commentaires

Merci "Imran" quand j'essaye votre solution J'ai un problème de type parce que le commutateur antd accepte le type booléen J'essaye d'ajouter "componentDidMount" pour modifier l'état "statusValue" à false quand valueState est égal à 1 mais la solution a échoué

Cher @Wiem: Pourriez-vous s'il vous plaît me montrer où vous êtes toujours confronté au problème.Je peux parcourir une documentation sur antd et je promets de vous aider :) Seulement si vous pouviez m'expliquer ce que vous essayez de réaliser à partir de votre code en particulier du composant Switch, je serais ravi de vous aider :)

Merci Cher @Imran, j'ai résolu le problème merci beaucoup :)

@wiemkhardani Bienvenue très cher. Si ma réponse vous a aidé de quelque manière que ce soit, vous pouvez l'accepter en cliquant sur la coche d'approbation, afin que d'autres la trouvent également utile. Cela m'encourage à aider de plus en plus de gens :) Merci. Veuillez l'approuver si vous trouvez ma réponse utile. Fee AmaanilLah !!!

0
votes

Voici ma solution

.App {
  text-align: center;
}

.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

import React, { Component } from 'react';
import { Switch } from 'antd';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      onCheck: 0,
    };
  }

  componentDidUpdate() {
    const { onCheck } = this.state;
    console.log(onCheck);
  }

  handleToggle = (checked) => {
    const { onCheck } = this.state;

    if (checked) {
      this.setState({ onCheck: 1 });
    } else {
      this.setState({ onCheck: 0 });
    }
  };

  render() {
    const { onCheck } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <Switch defaultChecked={onCheck} onChange={this.handleToggle} />
        </header>
      </div>
    );
  }
}

export default App;

3 commentaires

Merci "Max", mais j'ai un problème car les accessoires "par défaut Checked" acceptent le type booléen et non le type number. cette solution ne fonctionne pas correctement car la valeur intialValue du commutateur est incorrecte.

ça marche pour moi, ce que vous pouvez faire est defaultChecked = {onCheck === 1? vrai faux}

J'ai utilisé cette solution: componentWillMount () {this.props.state.status === 0? this.setState ({statusValue: true}): this.setState ({statusValue: false})}