Dacă aveți probleme cu modificarea CSS în linie bazată pe starea componentelor a Routech, probabil că nu sunteți singur.

În această provocare, trebuie să adăugați cod pentru a schimba unele CSS inline condiționat pe baza stării unei componente React.

Când mergi pentru prima dată la provocare, iată codul pe care îl vei vedea:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line

    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Observați că un obiect de stil în linie, inputStyle, a fost deja declarat cu unele stiluri implicite.

Scopul dvs. în această provocare este să vă actualizați inputStyle deci marginea intrării este 3px solid red când există mai mult de 15 caractere în intrare. Rețineți că textul din caseta de introducere este salvat în starea componentei ca input:

...
this.state = {
  input: ''
};
...

Aproape, dar nu chiar

Imaginați-vă că, după ce citiți descrierea și instrucțiunile, veniți cu acest lucru:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Dar când încercați să trimiteți acest lucru, nu trece toate testele. Să aruncăm o privire mai atentă la ceea ce se întâmplă.

Soluții

Folosind un if afirmație

Declarând char este bine, dar aruncați o privire mai atentă la if condiție:

if(this.state.input > char) {
  inputStyle = {
    border:'3px solid red'
  }
}  

Sa nu uiti asta this.state.input este valoarea casetei de intrare și este un șir. De exemplu, ar putea fi „testarea testării 1, 2, 3”.

Dacă introduceți „testarea testării 1, 2, 3” în caseta de text și lot this.state.input la consolă:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    console.log(this.state.input);
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Vei vedea testing testing 1, 2, 3 în consolă.

Mai departe, dacă vă logați this.state.input > char la consolă, veți vedea că se evaluează la false:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    console.log(this.state.input > char);
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Pur și simplu, nu puteți compara un șir (this.state.input) direct către char, care este un număr.

În schimb, sunați la .length pe this.state.input pentru a obține lungimea șirului și a o compara cu count:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    if(this.state.input.length > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Deoarece lungimea șirului „testarea testării 1, 2, 3” este de 23 de caractere (inclusiv spații și virgule), marginea casetei de intrare va deveni roșie:

React Schimbati CSS in linie in functie de starea

Folosind un operator ternar

A operator ternar sau condiționat este ca o singură linie if...else declarație și vă poate ajuta să vă scurtați codul în mod semnificativ.

Reveniți la soluția dvs. și eliminați totul, cu excepția char variabil:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line

    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Acum luați starea pe care ați folosit-o anterior if declarație și utilizați-o ca prima parte a condiției ternare: this.state.input.length > char ?  :  ;

Totul între ? și : indică ce se întâmplă dacă afirmația anterioară este adevărată. Puteți copia doar codul care se afla în interiorul dvs. if declarație înainte: this.state.input.length > char ? inputStyle = { border:'3px solid red' } :  ;

Acum trebuie să vă ocupați de else porțiunea operatorului ternar, care este totul între : și ;.

În timp ce nu ați folosit un else declarație din prima dvs. soluție, pe care ați folosit-o în mod eficient inputStyle ca atare. Deci, folosește inputStyle modul în care este declarat mai devreme în cod: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;

Întreaga dvs. soluție ar trebui să arate astfel:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Și atât – ar trebui să puteți trece provocarea! Acum, mergeți mai departe și stilizați condiționat Reacționați componentele la conținutul inimii voastre.