Question

我正在使用emoji-mart lib构建我的应用。

我有这样的文本输入：

<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>

现在，我想将Emoji对象显示为文本输入。在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中将表情符号对象显示为文本字段或文本区域

2 个答案: