Question

我是React的新手，自己学习它，我试图实现一种简单的形式，用户可以提供一个名称，然后将其存储为状态。一旦他停止键入并在发送时出现叮当响，则名称为store，字段为
输入中的复位不是状态。这就是我尝试过的，我得到

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

    changeFun = (e) => {
       this.setState({name: e.target.value})
    }

    submitFun = (e) => {
      e.preventDefault()
      this.setState({ name: e.target.value})
    }

    render() {
      return (
        <input type = "text" value={this.state.name}/>
        <button 
           onSubmit = {(e) => 
             this.submitFun(e).then(
               () => reset()           
             ) 
           onchange ={this.changeFun}}>
           SEND
        </button>
      )
    }

Answer 1

submitFun未返回承诺。因此，您不能在其后使用.then。

 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>

此外，您需要为onClick标签使用onSubmit而不是<button>。
onSubmit将用于<form>标签。

Answer 2

您要实现的目标称为受控组件！更多信息here。

受控组件的基础基本上是您处于状态的属性和一个表单元素（即，输入元素）。那么您可以通过一个函数将输入值链接到您的状态，并且该函数将在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>
    )
  }
}

这是您要执行的操作的基本实现，请点击此处：https://codesandbox.io/s/m39w10olnp

在您提供的示例中，您使用then，该功能基本上是从函数返回承诺时使用的，例如：

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

因此您可以看到这里不需要使用then，请查看我的简单示例以更好地实现！

反应基本形式问题

2 个答案: