Реакция Emoji Picker не преобразуется в юникод - PullRequest
Новая
       25

Реакция Emoji Picker не преобразуется в юникод

1 голос
/ 26 марта 2019

Я ссылаюсь на это

https://github.com/ealush/emoji-picker-react

У меня проблемы с рендерингом настоящих смайликов, но это не так.Когда вы нажимаете на него, он должен загрузить Emoji PNG, но это не так.

Также глядя на это

https://github.com/atatarinov/react-emoji/blob/master/app/components/ChatWindow.js

enter image description here

Рабочая демонстрация

https://codesandbox.io/s/qqmvo5924?fontsize=14

App.js 

import React, { Component } from 'react';
import Navbar from './components/Navbar';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import logo from './logo.svg';
import { Typography } from '@material-ui/core';
import Footer from './components/Footer';
import Emoji from './components/Emoji';
import TextField from '@material-ui/core/TextField';
import EmojiPicker from 'emoji-picker-react';
import JSEMOJI from 'emoji-js';


let jsemoji = new JSEMOJI();

// set the style to emojione (default - apple)
jsemoji.img_set = 'emojione';
// set the storage location for all emojis
jsemoji.img_sets.emojione.path = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';

// some more settings...
jsemoji.supports_css = false;
jsemoji.allow_native = false;
jsemoji.replace_mode = 'unified'



const styles = theme => ({
 shadows: ["none"],
 spacing: 8,
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'left',
    width: '500px',
    color: theme.palette.text.secondary,

  },
  myitem:{
    margin:'40px'
  },
  emoji:{
    margin:'40px'
  }
});






class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      emoji: '',
      text:''

    }
  }

  onChange = (e) => {
    e.preventDefault()
    this.setState({
     text: e.target.value
    });
  }

  handleClick = (n, e) => {
    let emoji = jsemoji.replace_colons(`:${e.name}:`);
    this.setState({
      text: this.state.text + emoji
    });
    console.log(emoji)
  }

  render() {
    const { classes } = this.props;
    return (
        <div className={classes.root}>
          <Navbar />
          <Grid container spacing={12}>
            <Grid item sm={6} className={classes.myitem}  >
              <Paper className={classes.paper} >
                <Typography variant="h2" component="h2">
                    Insert An Emoji
                </Typography>
                <TextField
                        id="standard-name"
                        label="Emoji"
                        className={classes.textField}
                        value={this.state.text}
                        onChange={this.onChange}
                        margin="normal"
                    />


                <EmojiPicker onEmojiClick={this.handleClick}/>
              </Paper>

            </Grid>

          </Grid>
          {/* insert footer here */}

          <Footer/>
        </div>
    );
  }
}

export default withStyles(styles)(App);

1 Ответ

2 голосов
/ 26 марта 2019

Причина, по которой это происходит, в том, что используемый вами конвертер эмодзи был настроен на вывод тегов img.Вы должны настроить его для вывода юникодов вместо этого.Вам нужно перевернуть конфигурацию allow_native, чтобы это произошло (у вас сейчас установлено значение false): 

jsemoji.allow_native = true;

Для получения дополнительной информации см. документы .

...