6
votes

Réagissez en utilisant des emojis dans une liste déroulante

J'ai travaillé sur un petit jeu en réaction et une partie du jeu permet au joueur de définir certains paramètres avant de commencer. C'est un jeu d'étiquettes au tour par tour, quatre joueurs poursuivent différents jetons sur la carte, tout en évitant le joueur étiqueté "it".

J'ai la méthode de rendu suivante pour une option de sélection:

render() {
    return (
        <div>
            <form onSubmit={this.createPlayers} ref="form">
                <label htmlFor="goodies">Choose a Goody!</label>
                <select name="goodies" id="goodies">
                    <option value="donut">ðŸ©</option>
                    <option value="cookie">ðŸª</option>
                    <option value="hotdog">ðŸŒ</option>
                    <option value="bacon">ðŸ¥“</option>
                    <option value="hamburger">ðŸ”</option>
                    <option value="brocolli">ðŸ¥¦</option>
                </select>
                <button type="submit">Play!</button>
            </form>
        </div>
    );
}

javascript reactjs accessibility

3 commentaires

Avez-vous essayé 🐼 ?

Comme je l'ai dit, si je fais cela, le JSX ne se compilera pas.

Supprimez la règle accessible-emoji de votre fichier de configuration .eslintrc .

3 Réponses :

4
votes

Mise à jour : vous souhaiterez peut-être créer un composant pour Emoji comme suit avec la balise dans le composant Emoji

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

    const Emoji = props => (
  <option
    className="emoji"
    role="img"
    aria-label={props.label ? props.label : ""}
    aria-hidden={props.label ? "false" : "true"}
    value={props.label}
  >
    {props.symbol}
  </option>
)

class MyComponent extends React.Component {
  render() {
    return (    
      <div> 
        <form onSubmit={this.createPlayers} ref="form">
            <label htmlFor="goodies">Choose a Goody!</label>
            <select onChange={(e)=>{console.log(e.target.value)}} name="goodies" id="goodies">
               <Emoji label="donut" symbol="ðŸ©" />
               <Emoji label="cookie" symbol="ðŸª" />  
               <Emoji label="hotdog" symbol="ðŸŒ" />   
               <Emoji label="bacon" symbol="ðŸ¥“" />  
               <Emoji label="hamburger" symbol="ðŸ”" />   
               <Emoji label="brocolli" symbol="ðŸ¥¦" />                    
            </select>
            <button type="submit">Play!</button>
        </form>
      </div>
          
    )
  }
}

ReactDOM.render(<MyComponent />, document.querySelector("#app"))

2 commentaires

Si je fais cela, je me retrouve avec [objet Objet] dans ma liste déroulante.

Ça le fait de mon côté! Je vous remercie :)

13
votes

Ajoutez dans sélectionnez comme ceci

 <select name="goodies" id="goodies">
    <option value="donut">
       <span role="img" aria-label="donut">ðŸ©</span> 
   </option>
   ....
  </select>

0 commentaires

2
votes

Une façon que j'ai trouvée d'utiliser les emojis avec react est la syntaxe suivante basée sur l'Unicode d'emoji.

Essayez ceci:

render() {
    return (
        <div>
            <form onSubmit={this.createPlayers} ref="form">
                <label htmlFor="goodies">Choose a Goody!</label>
                <select name="goodies" id="goodies">
                    <option value="donut">{`\u{1f369}`}</option>
                    <option value="cookie">{`\u{1f36a}`}</option>
                    <option value="hotdog">{`\u{1f32d}`}</option>
                    <option value="bacon">{`\u{1f953}`}</option>
                    <option value="hamburger">{`\u{1f354}`}</option>
                    <option value="brocolli">{`\u{1f966}`}</option>
                </select>
                <button type="submit">Play!</button>
            </form>
        </div>
    );
}

Donc, votre code serait comme:

{`\u{1f369}`}

Cela peut ne pas fonctionner pour tous les emoji.

1 commentaires

Je ne suis pas sûr de la chose {` cependant, je viens d'utiliser \ u {} .