react from 表单获取值

import React, { Component } from 'react'
import { Form, Input, Button } from 'antd'
 
class formDataexplae extends Component {
  // 通过 Ref 来获取 Form 实例
  // 同样的,你可以不使用createRef()方法而用this.refs.XXX也可以
  formRef = React.createRef()
 
  // 通过 Form 的 Submit监听 得到字段值
  onFinish = values => {
    console.log(values)
  }
 
  getValues= () => {
    // 得到 Form 实例
    const form = this.formRef.current
    // 使用 getFieldsValue 获取多个字段值
    const values = form.getFieldsValue(['name','age'])
    const values = form.getFieldsValue()  //获取所有表单的内容
    console.log(values)
  }
 
  getValidateValues= async () => {
    const form = this.formRef.current
    // 使用 validateFields 获取验证后字段值
    try {
      const values = await form.validateFields(['name','age'])
      console.log(values)
    } catch (err) {
      console.log(err)
    }
  }
 
  render() {
    const { Item } = Form
    return (
      <Form ref={this.formRef} onFinish={this.onFinish}>
        <Item name='name' label='姓名' rules={[{required:true,message:'请输入姓名'}]}>
          <Input />
        </Item>
        <Item name='age' label='年龄'>
          <Input />
        </Item>
        <Item>
          <Button type='primary' htmlType='submit'>提交</Button>
          <Button type='link' onClick={this.getValues}>非 Submit 方式(不验证)</Button>
          <Button type='link' onClick={this.getValidateValues}>非 Submit 方式(验证)</Button>
        </Item>
      </Form>
    )
  }
}
 
export default formDataexplae
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 中提交表单的方式与原生 HTML 中有所不同。以下是一个基本的示例: 首先在 React 组件的状态中添加表单输入的: ```jsx class MyForm extends React.Component { constructor(props) { super(props); this.state = { name: '', email: '', message: '' }; } // 处理表单输入 handleChange = (event) => { const { name, value } = event.target; this.setState({ [name]: value }); } // 处理表单提交 handleSubmit = (event) => { event.preventDefault(); // 防止默认提交行为 console.log(this.state); // 打印表单输入的 } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" name="name" value={this.state.name} onChange={this.handleChange} /> </label> <label> Email: <input type="email" name="email" value={this.state.email} onChange={this.handleChange} /> </label> <label> Message: <textarea name="message" value={this.state.message} onChange={this.handleChange} /> </label> <button type="submit">Submit</button> </form> ); } } ReactDOM.render(<MyForm />, document.getElementById('root')); ``` 在上面的例子中,我们创建了一个名为 `MyForm` 的 React 组件,并在状态中添加了三个输入:`name`、`email` 和 `message`。我们还定义了两个方法来处理表单输入和提交,分别是 `handleChange` 和 `handleSubmit`。 在 `handleChange` 方法中,我们使用 `event.target` 来获取输入的,并使用 `setState` 方法将其保存到组件的状态中。 在 `handleSubmit` 方法中,我们使用 `event.preventDefault()` 防止默认的表单提交行为。然后我们打印出组件的状态,以便查看表单输入的。 最后,我们在表单元素上使用 `onSubmit` 属性来执行 `handleSubmit` 方法。这将会在用户点击提交按钮时触发。 希望这个例子能帮助你理解如何在 React 中提交表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值