antd Select onChange获取除了value其他的值_select onchange获取值_superTiger_y的博客

相关文章推荐
要出家的鞭炮 · 精彩实例 ...· 5 月前 ·
谦虚好学的火柴 · 【故事】凤凰展翅连通途－国务院国有资产监督管 ...· 6 月前 ·
不要命的伏特加 · BKPP、孙燕姿、周深...音乐节比演唱会香 ...· 1 年前 ·
孤独的火龙果 · 电影菜单深度解析_电影两个人的菜单剧情简介_ ...· 2 年前 ·
暗恋学妹的吐司 · 大众ID.6电动轿车谍照曝光 ...· 2 年前 ·
在日常工作中,有时候需要获取下拉选择框除了value其他的值,在antd 官网中可以使用api labelInValue ; 每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式
但是实际开发过程中这种远远不能满足需要:
import { Select } from 'antd';
const { Option } = Select;
const opts = [
    {label:'1',value:1,data:{label:'这里用你的数据',value:[1,2,3,4]}},
    {label:'2',value:2,data:{label:'博客名:',value:'superTiger_y'}},
// evt 就是在opt中中绑定的data
  function handleChange(value, evt) {
    console.log('这里能拿到你在opts中定义的数据data:', evt);
ReactDOM.render(
     <Select
        defaultValue="lucy"
        style={{ width: 120 }}
        onChange={handleChange}
        {opts.map((item, index) => (
          <Option value={item?.value} key={index} data={item?.data}>
            {item?.label}
          </Option>
      </Select>
  mountNode,
                    在日常工作中,有时候需要获取下拉选择框除了value其他的值,在antd 官网中 可以使用api labelInValue;每个选项的 label 包装到 value 中,会把 Select 的 value 类型从string变为 { value: string, label: ReactNode } 的格式但是实际开发过程中这种远远不能满足需要:import { Select } from 'antd';const { Option } = Select;const opts = ...
	&lt;select name="type" onchange="show_sub(this.options[this.options.selectedIndex].value)"&gt; 
	&lt;option value="0"&gt;请选择主类别&lt;/option&gt; 
	&lt;option value="1"&gt;
<Form.Item label=作用对象>
      {getFieldDecorator('targetId', { initialValue: this.state.targetId }, {
       rules: [{
        required: false,
        message: '作用对象'
       <Select placeholder=请选择作用对象>
        {targetList.map(entity => <Option key={enti
				自定义组件
1、自定义组件被getFieldsValue包裹，会获得以下属性
onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值
value属性，获得初始值
2、组件调用
像Form表单内的组件一样调用，就可以了
补充知识：Ant Design Pro，用setFieldsValue方法，给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值 
其实用setFieldsValue或者获取setState方法都可以设置DatePicker的默认值。
但是关键点在于，引用moment方法转换日期格式
1、setState方法
使用 antd Select dropdownRender 方法自定义原组件下拉列表部分
虚拟滚动渲染，只渲染可视区列表，滚动动态加载其他列表，支持上万条数据渲染
对自定义列表项绑定原 Select 组件的各项方法和回调函数支持
同步使用 antd 组件下拉列表样式
同 antd select api
设置 mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} 属性可成为支持大数据渲染的 AutoComplete 组件
更多 antd 长列表渲染性能问题讨论可查看
antd 4.0 Select 组件已支持虚拟列表（ie11+），此组件基于 antd 3.x，可用于 ie9 浏览器
基本使用同 antd Select，只是使用 SuperSelect 代替 Select
第一次选择第一个option ![](https://img-blog.csdnimg.cn/20201026153601368.png#pic_center
重新搜索，依然选择第一个： 
展示的依然是第一次选择的option。
这是因为onChange没有被触发。
用onSelect替换onChange。
onSelect在每次选择option的时候都会触发，o
				### 回答1：
在使用 antd 进行表单验证时，如果需要获取其他表单项的值进行逻辑判断，则可以通过自定义校验函数来实现。比如，我们需要判断输入的密码和确认密码是否一致，就需要获取确认密码的值来进行比较。
首先，在需要运用验证的表单组件中，需要引入 antd 的 Form 组件，并使用 getFieldDecorator 方法进行包装。在 getFieldDecorator 方法中，可以传入自定义的校验函数 validator，函数中的参数 rule 和 value 分别代表当前被验证的表单项和其对应的值。我们可以通过 Form 对象的 getFieldValue 方法来获取其他表单项的值，然后在校验函数中进行比较。
```jsx
import { Form, Input, Button } from 'antd';
const CustomForm = () => {
  const handleSubmit = e => {
    e.preventDefault();
    // 处理表单提交事件
  const compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致');
    } else {
      callback();
  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="密码">
        {getFieldDecorator('password', {
          rules: [{ required: true, message: '请输入密码！' }],
        })(<Input type="password" placeholder="请输入密码" />)}
      </Form.Item>
      <Form.Item label="确认密码">
        {getFieldDecorator('confirmPassword', {
          rules: [
            { required: true, message: '请确认密码！' },
            { validator: compareToFirstPassword },
        })(<Input type="password" placeholder="请确认密码" />)}
      </Form.Item>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form>
在上面的例子中，我们定义了校验函数 compareToFirstPassword，它会比较确认密码表单项的值和密码表单项的值，如果不一致，则提示错误信息。在比较时，我们使用 this.props.form.getFieldValue('password') 方法获取密码表单项的值。注意，这里需要通过 props 传递 Form 对象，或者通过高阶组件 Form.create() 包装组件来获取 Form 对象。
除了在自定义校验函数中获取其他表单项的值外，在表单提交事件中也可以通过 this.props.form.getFieldsValue() 方法获取所有表单项的值。这个方法会返回一个对象，包含所有表单项的键值对。   
### 回答2：
antd是一个基于React的UI组件库，它提供了一系列的组件如表单(Form)，表单验证是表单功能中的重要部分。在实际使用中，我们可能会遇到需要在验证中获取其他表单值的情况。下面就是关于在antd表单验证时获取其他表单值的详细解释。
为了方便，我们先来复习一下antd表单验证的基本用法。antd提供了一个高阶组件`Form.create()`，用于将一个组件变成表单。我们可以定义一个包含验证规则和初始值的表单组件，然后使用`Form.create()`将其转换为一个antd表单组件。
例如，我们可以定义一个包含两个表单项（用户名和密码）的组件，并设置它们的初始值和验证规则：
import React from 'react';
import { Form, Input } from 'antd';
const LoginForm = (props) => {
  const { getFieldDecorator } = props.form;
  return (
      <Form.Item label="用户名">
        {getFieldDecorator('username', {
          initialValue: '',
          rules: [
            { required: true, message: '请输入用户名' },
            { pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: '用户名必须为4-16位字母或数字' },
        })(<Input />)}
      </Form.Item>
      <Form.Item label="密码">
        {getFieldDecorator('password', {
          initialValue: '',
          rules: [
            { required: true, message: '请输入密码' },
            { pattern: /^[a-zA-Z0-9_-]{6,18}$/, message: '密码必须为6-18位字母或数字' },
        })(<Input.Password />)}
      </Form.Item>
    </Form>
export default Form.create({ name: 'login' })(LoginForm);
上面的代码定义了一个名为`LoginForm`的组件，包含两个表单项：`username`和`password`。每个表单项都被封装在`getFieldDecorator`函数中，并设置了初始值和验证规则。`Form.create()`函数将整个组件转换为一个antd表单组件，并指定表单名称为`login`。
接下来，我们可以在表单提交时触发验证。antd提供了一个`validateFields`函数，用于校验表单所有项。我们可以在`LoginForm`组件中定义一个`handleSubmit`函数，在按钮点击时触发`validateFields`函数。例如：
const handleSubmit = (e) => {
  e.preventDefault();
  props.form.validateFields((errors, values) => {
    if (!errors) {
      console.log('表单验证通过', values);
    } else {
      console.log('表单验证失败', errors);
以上代码中，`handleSubmit`函数首先阻止了事件的默认行为，然后调用了`validateFields`函数进行表单验证。`validateFields`函数的第一个参数是回调函数，该回调函数会在验证成功或失败时被调用。如果验证成功，回调函数的第二个参数是表单所有项的值。
现在我们来看怎么在antd表单验证时获取其他表单值。在实际使用中，我们可能遇到一些特殊情况，需要获取其他表单项的值进行验证。
例如，我们想要验证密码和确认密码是否一致。此时，我们需要在验证确认密码时获取密码的值进行比较。我们可以通过在`getFieldDecorator`函数中传递`options`参数的方式来获取其他表单值。
以下是获取密码值的代码：
const checkPassword = (rule, value, callback) => {
  const { getFieldValue } = props.form;
  if (value && value !== getFieldValue('password')) {
    callback('确认密码与密码不一致');
  } else {
    callback();
以上代码中，我们定义了一个名为`checkPassword`的函数，用于验证确认密码是否与密码相同。在该函数中，我们通过`getFieldValue`函数获取了密码字段的值，然后进行比较。如果不相同，就调用`callback`函数传递一个错误信息，否则调用`callback`函数传递一个空字符串。
接下来，在确认密码的`getFieldDecorator`函数中，我们传递了一个`options`参数，这个参数包含了一个`validator`函数，该函数会在确认密码发生变化时被调用。在`validator`函数中，我们调用`checkPassword`函数进行验证。以下是确认密码表单项的代码：
<Form.Item label="确认密码">
  {getFieldDecorator('confirmPassword', {
    initialValue: '',
    rules: [
      { required: true, message: '请输入确认密码' },
      { validator: checkPassword },
  })(<Input.Password />)}
</Form.Item>
至此，我们讲解了在antd表单验证时获取其他表单值的方法。在实际开发中，需要根据具体情况来进行实现。在验证过程中，我们可以通过`getFieldDecorator`函数的`options`参数来获取其他表单值。另外，我们也可以在表单提交前手动获取其他表单值进行验证。需要注意的是，在antd表单验证和表单项获取的过程中，我们都需要使用antd的高阶组件`Form.create()`将组件转换为antd表单组件。   
### 回答3：
antd 是一款基于 React 的 UI 组件库，它提供了一些方便的表单组件和表单验证组件，可以帮助我们快速地开发出美观、易用、功能强大的表单页面。在antd中，我们可以通过 getFieldDecorator 方法来创建表单控件，并在其中设置一些验证规则，以保证用户输入的数据的合法性。但是，在实际开发过程中，我们常常需要获取其他表单控件的值，然后根据这些值来进行验证或者其他操作。那么，antd 验证时如何获取其他表单值呢？下面，我给大家介绍一些方法。
1. 表单嵌套
首先，我们可以在 Form 组件内部使用其他的表单组件，这样就可以通过事件来获取其他表单组件的值。例如：
```jsx
<Form onSubmit={handleSubmit}>
  <FormItem label="用户名">
    {getFieldDecorator("username", {
      rules: [{ required: true, message: "请输入用户名" }],
    })(<Input />)}
  </FormItem>
  <FormItem label="密码">
    {getFieldDecorator("password", {
      rules: [{ required: true, message: "请输入密码" }],
    })(<Input type="password" />)}
  </FormItem>
  <FormItem>
    {getFieldDecorator("remember", {
      valuePropName: "checked",
      initialValue: true,
    })(<Checkbox>记住我</Checkbox>)}
  </FormItem>
  <FormItem>
    <Button type="primary" htmlType="submit">
    </Button>
  </FormItem>
</Form>
在 handleSubmit 函数中，我们可以通过 e.target.username.value 来获取用户名的值，e.target.password.value 来获取密码的值，这样就可以根据这些值来进行验证或者其他操作。
2. 自定义校验规则
其次，我们可以在 getFieldDecorator 的 rules 中自定义一些验证规则，然后在校验函数中通过 form.getFieldValue 方法来获取其他表单控件的值。例如：
```jsx
const checkPassword = (rule, value, callback) => {
  const form = this.props.form;
  if (value && value !== form.getFieldValue("password")) {
    callback("两次输入的密码不一致，请重新输入！");
  } else {
    callback();
<Form onSubmit={handleSubmit}>
  <FormItem label="密码">
    {getFieldDecorator("password", {
      rules: [{ required: true, message: "请输入密码" }],
    })(<Input type="password" />)}
  </FormItem>
  <FormItem label="确认密码">
    {getFieldDecorator("confirmPassword", {
      rules: [
        { required: true, message: "请再次输入密码" },
        { validator: checkPassword },
    })(<Input type="password" />)}
  </FormItem>
  <FormItem>
    <Button type="primary" htmlType="submit">
    </Button>
  </FormItem>
</Form>
在 checkPassword 函数中，我们通过 form.getFieldValue("password") 来获取密码控件的值，然后与当前控件的值进行比较，如果不一致则抛出错误信息，否则调用 callback 回调函数。
3. 使用 ref
最后，我们还可以通过 ref 来获取其他表单控件的值。例如：
```jsx
<Form onSubmit={handleSubmit}>
  <FormItem label="用户名">
    {getFieldDecorator("username", {
      rules: [{ required: true, message: "请输入用户名" }],
    })(<Input ref={this.usernameRef} />)}
  </FormItem>
  <FormItem label="密码">
    {getFieldDecorator("password", {
      rules: [{ required: true, message: "请输入密码" }],
    })(<Input type="password" ref={this.passwordRef} />)}
  </FormItem>
  <FormItem>
    <Button type="primary" htmlType="submit">
    </Button>
  </FormItem>
</Form>
在 handleSubmit 函数中，我们可以通过 this.usernameRef.current.value 来获取用户名的值，this.passwordRef.current.value 来获取密码的值，这样就可以根据这些值来进行验证或者其他操作。
总之，antd 验证时获取其他表单值有很多种方法，以上只是其中的几种，具体应该根据实际情况选择最适合的方法。希望这篇文章能够帮助大家解决关于antd 验证时获取其他表单值的问题。