in the modification function, get record and put it in form when you click on a record, and then click OK after modification. I want to get the value of each Input through this.refs.refName.value, but I find that as long as I add refs to the Input component of Antd, I will report an error:
this.refs.refName.valueinput
could you tell me how to solve this? Thank you ~
get the value with the api included with antd form
Don't bother this.refs directly use the following API to get the value
form.getFieldsValue(); do not use refs to get value .
you already use the Form component.
so you can get the book name using getFieldValue or getFieldsValue .
eg: getFieldValue ('name') .
reference Form )
does not need to be obtained manually, and two-way data binding is implemented in antd.
there is demo on the official website
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
}
});
}
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>
);
}
}to get a single value, you can use: getFieldValue ('fieldName') / / fieldName to indicate that you have used the value registered by getFieldDecorator. Your name/price/owner_id
Previous: Webpack error, fs package has been installed, still error
Next: How to view the source code of built-in functions in python
use list as the option data source for Select, but use callback, which cannot be rendered. Just call it directly, as shown in the figure below. The first method is fine, and the second is not. Because there are many Select, on a page, you need to use th...
The structure of the data is like this, and you need to use this to generate a form like this { name: , groups: [ { groupName: , state: 1, 1 0 isOpen: 1, 1 0 ...
the column of operation on the right is floating then there may be additions and deletions to the columns here, which will change the height of the table row, but the height of the floating column on the right is fixed, which makes it ugly . ...
the following code: var params = new URLSearchParams(); params.append( kssj , kssj); params.append( jssj ,jssj); axios.post( api php history carList.json ,params).then((res)=>{...} all the demo I write uses URLSearchPara...
I disabled mock .webpackrcproxy using the ant design pro framework. I set up a proxy but it doesn t work well, and I can t request the interface in the background all the time ...
import React from react ; import {Link} from dva router import {Menu, Icon, Avatar, Layout, Breadcrumb, Button, notification, Select, Pagination, Checkbox, Input} from antd ; import logo from . css App.css ; import ayjs from . css a...
after a successful login, dispatch sends a request in componentDidMount. At first, the request is successful, but after a while, the request automatically fails, reporting an error of 401, but it is good to log in again. ...
console prompts the following warnings: Warning: the children of Select should be Select.Option or Select.OptGroup , instead of Option . <Select showSearch style={{ width: 260,height: 32 }} placehold...
how to prevent the selection of parents from the TreeSelect tree selection control in Ant Financial Services Group ANTD? For example: { name: , key: first , children:[{ name: key: second , children:[{ name: , key: third ...
my project create-react-app serves as the foreground, ssm serves as the background, and the foreground json is passed to the background through cross-domain means. the setting of the proxy agent in package.json "proxy": { " api php"...
the project done by ant design pro is packed with a very large js file. How to separate the code and reduce the volume of js ...
export class ProjectList extends Component{ constructor(props){ super(props) this.state={ project:[], } } componentDidMount(){ axios.get( http: 127.0.0.1:9090 pro pList ).then(res =>{ ...
namespaceperformanceconsoleperformance: each field output of the first console is empty, the second console will return the data of the first dispatch request, and the third time will return the data of two dispatch, but the network of the console on...
how to merge common data according to id using the Table component in Ant Design implemented by React. For example, there is the following data: (the data is acquired dynamically in the background) Users:[ {id:1,name: ,resume: }, {id:1,...
The default height of the Table list in antd is not good-looking. If you want to adjust the height, you will find that if there is too much content, it will not automatically wrap, the content will overlap, and adding the auto-wrapping attribute white-s...
the following Table page, for example, when the page is initialized, you want to judge according to the age of Age. For example, if you mark the text red if it is greater than or equal to 30, it seems to me that the attribute method under table has not ...
...
Click Edit in the form (in the form is a table), each column of this line becomes an input, editor, you always enter it backwards (for example: 1234, but the input is 4321). How to solve this problem? cacheOriginData = {}; toggleEditable=(e, key) =...
it is found that the first switch of the tab will render the interface request data, and the second switch will automatically cache the interface without requesting the interface. If I want to request the interface every time I switch, what should I do ...
1. Use antd in react to create a table with editable row elements, as written in the official document: import { Table, Input, InputNumber, Popconfirm, Form } from antd ; const data = []; for (let i = 0; i < 100; iPP) { data.push({ key: i...