為什么給Antd design的Input組件添加ref會(huì)報(bào)錯(cuò)？

在做修改功能，點(diǎn)擊一條記錄的時(shí)候獲取record放到form里面，然后修改之后點(diǎn)擊確定我想要通過(guò)this.refs.refName.value來(lái)獲取每個(gè)Input的值，但是發(fā)現(xiàn)只要給Antd的Input組件加ref值就會(huì)報(bào)錯(cuò):
圖片描述

圖片描述

按照this.refs.refName.value取值沒(méi)有問(wèn)題呀，我寫(xiě)了一個(gè)普通的input可以取到值也沒(méi)有報(bào)錯(cuò)
圖片描述

請(qǐng)問(wèn)這個(gè)怎么解決？謝謝~

回答

編輯回答

浪蕩不羈

不用這么麻煩 this.refs 直接用下面的 API 去獲取值

form.getFieldsValue();

2017年5月17日 05:49

編輯回答

礙你眼

不要使用refs來(lái)獲取value。
你都使用Form組件了。
所以可以采用getFieldValue或者getFieldsValue.
eg: getFieldValue('name')就獲取到書(shū)籍名稱(chēng)。
參考Form)

2018年9月6日 10:55

編輯回答

孤慣

不需要手動(dòng)獲取，在antd里面實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。
官網(wǎng)有demo

import { Form, Icon, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values); // values就是你填入表單的數(shù)據(jù)
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
          <a className="login-form-forgot" href="">Forgot password</a>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          Or <a href="">register now!</a>
        </FormItem>
      </Form>
    );
  }
}

獲取單個(gè)值可以使用：getFieldValue('fieldName') // fieldName表示你使用了getFieldDecorator注冊(cè)過(guò)的值。你的name/price/owner_id

2017年5月6日 09:14

編輯回答