Reactjs 清除react中的输入值

我使用useState钩子：

const [newGlass, setNewGlass] = useState({});

然后我在我的组件中控制“输入”：

<input ref={nameRef} value={newGlass.name} onChange={handleNameChange} type="text" className="form-control" name="name" id="name" />

我的提交功能：

function handleNameChange(e) {
    newGlass.name = e.target.value;
    setNewGlass(newGlass);
}

function submit() {
    console.log("submited", newGlass, nameRef, whyRef);
    newGlass.id = i++;
    let newState = [Object.assign({}, newGlass), ...glassWords];
    setNewGlass({});
    nameRef.current.value = "";

    setGlassWords(newState);
}

问题是，如果我在提交后尝试将输入设为空，为什么它不起作用

只有裁判帮助我。如果我只是尝试设置“setNewGlass（{}）；”值，那么表单输入中的值将与提交前保持相同

如果我尝试“setNewGlass（{name:}）；”-那么在它之后，我根本无法更改输入值

我做错了什么？如何在没有参考的情况下进行正确的受控输入

可能我不应该将对象用于useState？但在文档中，我看到这个钩子可以很好地处理对象

另外，我试图使“handleNameChange”不可变，但它没有效果

UPD。哦，我忘了告诉你，如果我使用单独的“const[newGlassName，setNewGlassName]=useState（“”）”，一切都正常，我的输入在“setNewGlassName（“”）之后变成空的

但我的表单中有大约13个输入字段，我试图理解如何在UseStateHook中使用Object

UPD2。我尝试将“console.log（newGlass）；”添加到我的组件并删除引用。现在，当我使Submit时，我的组件函数启动并“console.log（newGlass）；”说“{}”。这意味着我的输入必须变为空，但它们不是

这导致人们认为React可能是通过引用来比较状态的，而不是开始重新呈现我的组件？我很困惑

有人能帮我吗？我能做些什么来强制重新渲染？或者，如果我能在他需要重新渲染时帮助他做出反应以了解情况会更好？还是使用类而不是函数组件更好

---

我想我需要像“shouldComponentUpdate（）”这样的东西，但是对于功能组件，而不是类，你知道吗？

我不熟悉useState钩子，下面是我要做的：

class MyComponent extends React.Component {
  constructor(props) {
    this.state = {name: ""}
    this.handleNameChange = this.handleNameChange.bind(this)
  }

  handleNameChange() {
    // call your setGlassWords if you need
    this.setState({name: e.currentTarget.value})
  } 

  render() {
    return (
      <input value={this.state.name} onChange={handleNameChange} type="text" className="form-control" name="name" id="name" />
    )
  }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ this.state={name:} this.handleNameChange=this.handleNameChange.bind（this） } handleNameChange（）{ //如果你需要的话，打电话给你的朋友 this.setState（{name:e.currentTarget.value}） } render（）{ 返回( ) } }

---

首先，您必须更改

handleNameChange

功能。可能是这样的：

功能手柄名称更改（e）{
setNewGlass（即目标值）；
}

然后您必须更改

onSubmit

函数

功能提交（e）{
//别忘了使用e.preventDefault（）
e、 预防默认值（）；
让currentName=newGlass；
currentName.id=2；
setGlassWord（当前名称）
setNewGlass（{}）
}

---

我认为它应该是有效的，正如你没有问一个详细的问题，如果你想得到更好的答案，你应该考虑增加更多的代码到你的问题。< /P>函数HouLeMeMechange（e）{SETEngEngle（{Ne:E.Talk.Value}）；}你没有正确地设置状态！OP要胡克苏，对不起。不过，不需要感叹号，只是想在这里提供帮助。一个好的答案可能是：RTFM，因为文档中讨论了受控输入。“setNewGlass（e.target.value）；”——但我尝试使用对象值来表示它“const[newGlass，setNewGlass]=useState（{}）；”这个想法非常简单。我想将一个对象用于一个表单，并希望有机会作为一个整体对象进行更改和发送。例如，我们有一个人类对象，它有如下字段：名字、姓氏、电话、电子邮件、地址。我想将所有这些字段添加到一个对象中，比如“{lastName:'my last name'，email:'current email'}”，但不能像您建议的那样单独添加“setNewGlass（e.target.value）；”。