反应:使用传播运算符使用表单数据onChange更新状态

用户名

我正在尝试使用spread运算符更新状态,以便可以在http请求中传递表单数据,但是从console.logs中看到的内容似乎根本没有更新。

我还收到错误“ TypeError:散布不可迭代实例的无效尝试”。我需要将传入的数据作为对象。

import React from 'react'
import SuperAgent from 'superagent'
import { string } from 'prop-types'

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

    this.handleClick = this.handleClick.bind(this)
    this.onChange = this.onChange.bind(this)
    this.submitForm = this.submitForm.bind(this)

    this.state = {
      data: {}
    }
  }

  handleClick (e) {
    e.preventDefault()
    this.submitForm()
  }

  onChange (e) {
    this.setState(...this.state.data, {[e.target.name]: e.target.value })
  }

  submitForm () {
    const { data } = this.state
    SuperAgent
      .post('https://something.com')
      .set('Content-Type', 'application/json')
      .send({
        data: {
          'name': 'name',
          'formName': 'form',
          'emailName': 'email',
          data
        }})
      .end((err, res) => {
        if (err || !res || !res.body) return console.log(err)
        window.location='/contact-form-successful.html'
      })
  }

  render () {
    return (
      <section className='contact-form' id={this.props.id}>
          <form id='contact-form' method='post' action='#' onSubmit={this.handleClick}>
            <input
              name="username"
              type="text"
              value=''
              onChange={this.onChange}
            />
            <input
              name="email"
              type="email"
              value=''
              onChange={this.onChange}
            />
            <input
              name="birthdate"
              type="text"
              value=''
              onChange={this.onChange}
            />
            <button>Send data!</button>
          </form>
      </section>
    )
  }
}

export default ContactForm

ContactForm.propTypes = {
  id: string
}

ContactForm.defaultProps = {
  id: 'contact-form'
}
杜波卡斯

你用setState错了

this.setState(...this.state.data, {[e.target.name]: e.target.value })

应该

 const { target : { value, name } } = e
 this.setState(prevState => ({
     data: {
        ...prevState.data,
        [name]: value
     }
 }))

输入也value应反映state(受控输入)

<input
   name="username"
   type="text"
   value={this.state.username}
   onChange={this.onChange}
 />

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果使用传播运算符,为什么状态会更新为最新消息?

如何使用IN运算符更新cassandra中的数据

使用传播运算符更新包含对象的数组

在Typescript中的NodeList上使用传播运算符

TypeScript:使用传播运算符设置Object.prototype

使用React和Redux传播运算符错误

webpack 4反应意外的令牌...(传播运算符)

传播运算符无法在React Typescript中使用

使用传播运算符设置键名

如果我使用传播运算符,为什么状态会发生变化?

为何起作用:使用传播运算符更新状态中的数组元素

useState / useEffect的错误反应传播运算符

转换对象以使用传播运算符?

在不使用传播运算符的情况下正确更新React.js状态下的对象

NGXS使用运算符更新状态,然后将数据持久保存到Firebase

在使用svelte / store更新方法更新对象时,应该使用传播运算符吗?

在更新时在对象上使用useState挂钩时是否需要使用传播运算符?

角反应性表单-表单数组-如何使用传播运算符设置FormArray?

有关使用传播运算符“传播”对象作为参数的语法的问题

为什么我需要使用传播运算符并让克隆对象更新对象属性以做出反应

反应useState钩子影响状态中使用的默认变量,而不管散布运算符,Object.assign等如何

即使使用传播运算符React.JS,SetState也会覆盖以前的状态

Express无法在JavaScript中使用传播运算符

如何在Redux中使用传播运算符获取内部数组和对象的旧状态

关于使用and运算符更改标志布尔状态的问题

在htmlbars中使用es6传播运算符

使用>>运算符

使用表单数据更新网页

使用 like 运算符更新表

TOP 榜单

热门标签

归档