Reactjs 单击按钮设置状态

我想通过单击submit按钮来设置状态，但不使用

标记，只使用一个输入和一个按钮。 我的代码如下所示：

功能测试（）{
const[name，setName]=React.useState（'John'）；
函数输入更改（e）{
设val=e.target.value；
集合名（val）
}
函数submitFun（）{
//在这里，我希望setName（）类似于“setName（val）”，但变量val在inputChange（）中具有局部作用域
}
返回(
名称：{name}
提交
)
}
ReactDOM.render(
,
document.getElementById（'root'））
);
您可以使用
ref
获取
的值，更多信息请参阅

在这里，我使用
useRef
创建
ref
对象并将其传递给
（
ref={inputRef}
）

然后我可以使用
inputRef.current.value
获取
的值


功能测试（）{
const[name，setName]=React.useState（'John'）；
const inputRef=React.useRef（）；
函数submitFun（）{
setName（inputRef.current.value）
}
返回(
名称：{name}
提交
)
}
ReactDOM.render(
,
document.getElementById（'root'））
);

@Agney，你是对的


功能测试（）{
const[name，setName]=React.useState（“”）；
常量[btn，setBtn]=React.useState（“”）；
函数输入更改（e）{
设val=e.target.value；
集合名（val）
}
函数submitFun（）{
（姓名）
}
返回(
名称：{btn}
提交
)
}
ReactDOM.render(
,
document.getElementById（'root'））
);

是什么阻止您创建第二个状态变量（从提交时的第一个状态变量开始设置）？在这种情况下，我将得到下一个错误：
组件正在将未定义类型的非受控输入更改为受控。输入元件不应从非受控切换到受控（反之亦然）。决定在组件寿命期内使用受控或非受控输入元件
@AskMen未定义受控类型的非受控输入。这不是错误吗Warning@JayVaghasiya，正确，但无论如何我们不会避免这种情况。@AskMen是的，您可以在useRef:React.useRef（'John'）中传递值。@AskMen您可以将输入值设置为Unfine以获得此警告。