Javascript 对象对象在使用表情符号时显示在输入字段中这是我的代码任何人都可以看出我的错误 import React，{useState}来自“React” 从“表情市集”导入{Picker} 函数Emoji（）{ const[input，setInput]=useState（“”）； 常量文本=“”； 常量addEmoji=（e）=>{ 让表情符号=e.native； 设置输入({ 关键字：“文本”， text:input.text+emoji}）； console.log（“类型化”，输入） } const sendMessage=（e）=>{ e、 预防默认值（）； console.log（“最终”，输入） 设置输入（“”） } 返回( setInput（e.target.value）}/> 发送 ) } 导出默认表情符号

您以两种不同的方式设置输入字段，

的onChange

设置一个文本，而在

addEmoji

中设置一个对象，您应该为每个回调保持不同的状态，或者让对象进行输入并适当地设置值

const addEmoji=（e）=>{
让表情符号=e.native；
设置输入({
关键字：“文本”，
text:input.text+emoji
});
}

而且我不确定

input.text

是从哪里来的，尽管它没有在

useState（）

中设置

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

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

[input, setInput] = useState({})

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