Javascript 反应基本形式问题

我是一个新的反应和学习我自己，我试图实现一个简单的形式，用户可以提供一个名称，然后它将是存储状态。一旦他停止输入并点击发送，名称为store，字段为
在这种情况下，输入被重置，而不是状态。 这就是我尝试过的，我得到的

表示无法读取属性“then”的错误

changeFun=（e）=>{
this.setState（{name:e.target.value}）
}
submitFun=（e）=>{
e、 预防默认值（）
this.setState（{name:e.target.value}）
}
render（）{
返回(
这个。submitFun（e）。然后(
（）=>重置（）
) 
onchange={this.changeFun}}>
发送
)
}

submitFun

没有返回承诺。因此，您不能使用

。然后在它之后使用

 submitFun = (e) => {
   e.preventDefault()
   // this.setState({name: e.target.value}) should not be here
   // because e.target is <button/> 
   this.setState({name: ''}) // This will reset the input value
 }
 <button onClick = {this.submitFun} onchange ={this.changeFun}>SEND</button>

submitFun=（e）=>{
e、 预防默认值（）
//此.setState（{name:e.target.value}）不应在此处
//因为e.target是
this.setState（{name:'}）//这将重置输入值
}
发送

此外，对于
标记，您需要使用
onClick
而不是
onSubmit
。

onSubmit
将用于
标记
 您想要实现的被称为受控组件更多信息

受控组件的基础基本上是您在状态中有一个属性和一个表单元素（即和输入元素）。然后通过一个函数将输入值链接到状态，该函数将在
onChange
事件上运行，以在每次更改时更新状态

大概是这样的：

class App extends React.Component {
  constructor(props) {
    super()

    this.state = {
      inputValue: ""
    }
  }

  handleChange = e => {
    const _tempValue = e.target.value

    e.preventDefault()
    this.setState({inputValue: _tempValue})
  }

  handleSubmit = e => {
    const {inputValue} = this.state

    e.preventDefault()
    // here is your data
    // save it to redux or do what ever you want to
    console.log(inputValue)

    // last thing here is gonna be to reset state after submition
    this.setState({inputValue: ""})
  }

  render() {
    const {inputValue} = this.state
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            value={inputValue}
            onChange={this.handleChange}
            placeholder="type something"
          />
          <input type="submit" />
        </form>

        <p>{inputValue}</p>
      </div>
    )
  }
}

export const giveMeArray= () => {
  return new Promise( (res,rej) => {
    setTimeout(() => {
      res(Object.assign([], myArray))
    }, delay);
  })
}

因此，正如您所看到的，没有必要使用
，那么这里，请检查我的简单示例，以更好地实现它
 请按照编辑器中的方式提供代码。this.reset不是一个函数------我想重置输入而不是状态this.setState（{name:''}）将重置输入值，因为输入值与状态同步。我喜欢你的回答，我唯一想知道的是，在我单击send之后，状态会返回到默认值--send之后{this.state.name}
它会在我单击后显示默认值，因为您需要一个单独的函数，如
handleSubmit
，以便在提交后重置状态，我更新了这里的示例，并为您编写了代码沙盒
export const giveMeArray= () => {
  return new Promise( (res,rej) => {
    setTimeout(() => {
      res(Object.assign([], myArray))
    }, delay);
  })
}