开发者问题收集

React Hooks 中动态设置状态时出错

2019-12-21
68

嗨,我正在尝试在 react-hooks 概念中动态设置输入值,但遇到了错误。有人能帮我解决这个问题吗:

代码:

import React,{useState} from 'react';

function ObjectHook() {
    var [names,setName]=useState({fname:'',lname:''});
    let UpdateData = (event) =>{
        setName({...names,[event.target.name]:event.target.value})
    }
    return(
        <div>
            <input type='text' name='fname' value={names.fname} onChange={UpdateData}>First Name</input>
            <input type='text' name='lname' value={names.lname} onChange={UpdateData}>Last Name</input>
            <h1>{names.fname}</h1>
            <h1>{names.lname}</h1>
        </div>
    )
}

export default ObjectHook;

错误如下: 在此处输入图片描述

2个回答

使用占位符代替子文本

<input type='text' name='fname' value={names.fname} onChange={UpdateData} placeholder='First Name' />
Alexander Vidaurre Arroyo
2019-12-21

inputs 不接受子元素。这意味着您不能这样做...

<input>text</input>

您可以使用输入 placeholder 属性,但占位符不可 访问

最好的办法是使用标签。

<label>
  First Name<
  <input />
</label>
<label>
  Last Name<
  <input />
</label>
Ari
2019-12-21