当使用emoji-mart时，对象对象显示在输入字段中.这是我的代码，任何人都可以告诉我的错误

Question

import React, { useState } from 'react'
import {Picker} from "emoji-mart"
function Emoji() {
const [input, setInput] = useState('');
const text = '';
const addEmoji = (e) => {
let emoji = e.native;
setInput({
key: 'text',
text: input.text + emoji});
console.log("typed", input )
}
const sendMessage = (e) => {
e.preventDefault();
console.log("final",input)
setInput('')
}
return (
<div>
<form>
<input type='text' value={input} onChange={(e) => setInput(e.target.value)}/>
<button onClick={sendMessage} type="submit">send</button>
</form>
<span><Picker set='apple' value={input} onSelect={addEmoji}/></span>
</div>
)
}
export default Emoji

Answer 1

您以两种不同的方式设置输入字段，<input />'s onChange设置文本，而在addEmoji中设置对象，您应该为每个回调保持不同的状态，或者让对象进行输入并适当设置值。

const addEmoji = (e) => {
let emoji = e.native;
setInput({
key: 'text',
text: input.text + emoji
});
}

我不确定input.text是从哪里来的，尽管它不是在useState()中设置的。

目前，您正在将一个空字符串作为初始值传递给输入状态，它应该是一个对象

[input, setInput] = useState({})
<input onChange={e => { 
setInput(prevState => {...prevState, {key: 'text', text: e.target.value}})
} 
/>

一旦对象设置正确，您就可以在调用addEmoji时读取文本属性，并且在addEmoj中，您需要更新代码以设置正确的键，就像我在onChange回调中所显示的那样。

const addEmoji = (e) => {
const emoji = e.native;
setInput(prevState => {...prevState, {
text: input.text + emoji
});
}