在 React 中将表情符号对象显示到文本字段或文本区域

Question

我正在使用 emoji-mart 库构建我的应用程序。

我有这样的文本输入：

<FormGroup>
  {emoji}

  <EmojiMartPicker
    set='emojione'
    onSelect={(emoji) => console.log(emoji)}
    onChange={this.onChange}
  >
    <Input
      type="text"
      name="emotion"
      bsSize="sm"
      autoComplete="off"
      value={report.emotion.colons}
      onChange={this.onHandleFormChange}
      required
    />
  </EmojiMartPicker>
</FormGroup>

现在，我想在文本输入中显示表情符号对象。在 value 属性中。我想显示表情符号，而不是值文本。

我们该怎么做？

查看我的详细问题： https://codesandbox.io/s/646xom9y1z

Answer 1

抱歉，我发现只需添加 native 道具就可以解决我的问题。

像这样：

value={report.emotion.native}

就是这样..

Answer 2

我解决了这个问题看看。

<div className="chatemoji">
          <ButtonToolbar >
            <div onClick={e => e.preventDefault()}>
              {/* <EmojiField
                name="textarea"
                 onChange={this.onChange.bind(this)}
                fieldType="input"
              /> */}

               <EmojiField name="my-textarea" onChange={this.onChange.bind(this)} fieldType="input" />

            </div>
          </ButtonToolbar>
          </div>

在 onChange 中你必须调用这段代码

onChange(e,value) { 
    this.state.data += value;
    this.setState({ data: this.state.data });
   }

在 React 中将表情符号对象显示到文本字段或文本区域

Display emoji object to text field or textarea in React

javascript

emoji

reactjs