Reactjs 将select标记连接到表单，然后在提交时重置它

大家好，我正在尝试使用React在提交后重置select标记，我将第一个选项连接到以下状态：

state = {
    inputs: [],
    tempInput: {

       inputType: 'Please select a type'

    }
  }; 

所以我基本上在表单中选择一个类型，它用inputType更新tempInput对象，然后将其添加到对象数组中

 <div className="formG">
            <form className="form-maker" onSubmit={this.handleSubmit}>
               <select onChange={this.onSelect}>
                <option>{this.state.tempInput.inputType}</option>
                <option value="text">text</option>
                <option value="color">color</option>
                <option value="date">date</option>
                <option value="email">email</option>
                <option value="tel">tel</option>
                <option value="number">number</option>
              </select>

              <button>Submit</button>
            </form>

这是一个很好的例子。 如果要控制

输入的值

/

选择

，则需要通过您的状态进行设置：

const值=[
“文本”、“颜色”、“日期”、“电子邮件”、“电话”、“号码”
]
类应用程序扩展了React.Component{
状态={值：'}；
onSelect=（{target}）=>this.setState（{value:target.value}）
handleSubmit=（）=>{
console.log（'submit with'，this.state.value）
this.setState（{value:''}）
}
render（）{
const{value}=this.state；
返回(
选择一个值
{values.map（val=>{val}）}
提交
{`Selectet值为${Value}`}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
在onSelect函数中，您正在修改state对象（
tempInput.inputType=target.value；
），这在react中不是一个好的做法

如果希望select值由react状态控制，首先需要将其值与react状态绑定，该状态称为受控组件，如：

<select onChange={this.onSelect} value={this.state.tempInput.inputType}>


为什么不像我在onSelect上做的那样，在handleSubmit中设置state

这个

tempInput.inputType to=“请选择一种类型”

呢？是的，这样做应该会重置select，该解决方案对我不起作用。很抱歉，你的解决方案对我来说有点超前，你能给我一个没有数组的简单示例吗？好的，谢谢，但是我仍然不知道你在哪里把状态连接到标签上，我的意思是它是如何重置的？它是被选中的属性吗？我的意思是，在输入中有一个值连接到状态，这里连接的是什么？是的，准确地说，使用

selected

属性。它是

的DOM属性，与react无关。但现在我们控制的是它，而不是最终用户，但为什么要在每个选项中添加selected？据我所知，我并没有对状态对象进行变异，而是复制一个状态对象，然后将其放回原处。还是我错了？@AlexAlex在你的例子中，const{tempInput}=this.state；这行代码不是copy tempInput对象，它只是将对象引用复制到名为tempInput的变量。因此，当您执行以下操作时：tempInput.inputType to=“请选择一种类型”，您仍然在修改原始状态.tempInput。希望这能让你明白你确定吗？因为有人告诉我这是stackoverflow中用户更改状态的方法，所以我很困惑。@AlexAlex看看这个。打开控制台工具，你可以看到原始状态发生了变异，即使我没有设置我看到的，但我不明白你的方式，你如何改变状态？

<select onChange={this.onSelect} value={this.state.tempInput.inputType}>