React.js onChange<input> 標簽掛起

Question

因為我想通過輸入標簽獲取名稱。 每當我嘗試輸入某個值時，只輸入一個字母，然后輸入框進入其理想的 position。 它被掛起或卡住，我真的不明白。 我清楚這段代碼在我的另一個項目中工作，所以這真的很奇怪。

const [name, setName] = useState('')

<input type='text' placeholder='Name' class='inputColor width90' name='n' 
    onChange={(e)=>{
        setName(e.target.value)
    }}
required/>

這是我的 css 上面的代碼

.inputColor{
    padding: 5px;
    margin: 10px;
    border: 0px solid;
    background-color: #F0F0F0;
    color: #000000;
    font-size: 18px;
    outline: none;
    height: 35px;
}
.width90{
    width: 90%;
}

但是當我在不使用onChange function的情況下運行代碼時，輸入框不卡不掛。 我多次檢查語法，但我不知道為什么會這樣。

希望有人給我最好的解決方案。

Answer 1

您需要添加value={name}

<input 
    type='text' 
    placeholder='Name' 
    class='inputColor width90' 
    name='n' 
    value={name} 
    onChange={(e)=> {
        setName(e.target.value)
    }}
    required
/>

原因是如果你有一個onChange這意味着你正在嘗試動態設置值，這就是為什么你需要將value設置為name的值

Answer 2

在這里我找到了實際原因或我們對它說什么，我們無法識別它，因為它在控制台上沒有顯示任何錯誤並成功編譯程序。

const MyFunc = () => {

    const [name, setName] = useState('')
    
    const submitData = () => {
            Axios.post('http://localhost:3001/api/upload',{
                 n: name
            }
     }

     return (
          <div class='myCSS'>
            <table>
                <tr>
                    <td>
                        <img src={myimg} alt={myimg}/>
                    </td><td>
                        <input type='text' name='n' placeholder='Name' 
                            class='inputColor width90' 
                            onChange={(e)=>{setName(e.target.value)}}
                        required/>
                    </td><td>
                        <input type='submit' value='upload'
                             onClick={submitData}/>
                    </td>
                </tr>
            </table>
        </div>
     )
}

所以，首先我在MyFunc之外定義了name變量和submitData但是當我在 function 中定義它們時，掛起或卡住的錯誤解決了。