react antd 组件取值的方法
在React中，使用antd组件的方式可以通过不同的方法来获取组件的值。以下是一些常用的方法：
1. 使用受控组件：通过在组件上设置value或defaultValue属性，在onChange事件中获取组件的值。例如，使用Input组件：
jsx
import { Input } from 'antd';
class MyComponent extends React.Component {
  state = {
    value: '',
  };
  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };
  render() {
    return (
      <Input value={this.state.value} onChange={this.handleChange} />
    );
  }
}
2. 使用ref引用：使用ref属性来引用组件实例，然后通过ref.current属性来获取组件的值。例如，使用Input组件：
jsx
import { Input } from 'antd';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    InputRef = ateRef();
  }
  handleClick = () => {
    console.InputRef.current.input.value);
  };
  render() {
    return (
      <div>
        <Input ref={InputRef} />
        <button onClick={this.handleClick}>获取值</button>
      </div>
    );
  }
}
3. 使用Form组件：使用Form组件来管理表单，并通过getFieldValue方法来获取组件的值。例如，使用Input组件：
jsx
import { Form, Input, Button } from 'antd';
class MyComponent extends React.Component {
  formRef = ateRef();
  handleSubmit = () => {
    const value = this.FieldValue('myInput');
    console.log(value);
  };
  render() {
    return (
      <Form ref={this.formRef}>
        <Form.Item name="myInput">
          <Input />
        </Form.Item>
        <Button onClick={this.handleSubmit}>获取值</Button>
      </Form>
    );
  }
}
react面试题ref概念注意：以上示例代码中的antd版本为4.x版本，若使用的是3.x版本，部分方法和属性可能有所不同，需要根据具体版本进行调整。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。