Two ways to get the data in the Form form (take Input as an example)
1. Get all the data in the Form form through formRef.current.getFieldsValue()
const formRef = createRef<any>();
//1.获取 表单中所有数据的方法
let rtkobj =formRef.current.getFieldsValue();
//取出某条数据
rtkobj.landName
//2.重置 表单中所有数据
formRef.current.resetFields();
//3.设置 表单中某个组件的值（formRef.current.getFieldsValue()中一定要有这个属性名）
//直接
formRef.current.setFieldsValue({
landName: '新值' });
//间接（已知inputId="landName"时）
formRef.current.setFieldsValue({
[inputId]: '新值' });
//组件
<Form className="rtk-form" ref={
formRef}>
<Form.Item
label="地块名称"
name="landName"
colon={
false}
labelAlign="right"
labelCol={
{
span: 4 }}
rules={
[{
required: true, message: '请输入地块名称' }]}>
<Input style={
{
width: '93%', height: 40 }} placeholder="请输入地块名称" />
</Form.Item>
</Form>
2. Obtain all the data in the Form form through Form.useForm(), the usage is the same as above, without adding current in the middle
const [formRef] = Form.useForm();
//1.获取 表单中所有数据的方法
let rtkobj =formRef.getFieldsValue();
//以此类推
<Form className="form" form={
formRef}>
<Form.Item
label="地块名称"
name="landName"
colon={
false}
labelAlign="right"
labelCol={
{
span: 4 }}
rules={
[{
required: true, message: '请输入地块名称' }]}>
<Input style={
{
width: '93%', height: 40 }} placeholder="请输入地块名称" />
</Form.Item>
</Form>
Note: The above two methods are used according to the situation, as long as the data can be obtained, it can be used.
There are two ways to monitor or synchronize the data in the Form form (such as the value in Input)
1. Using the traditional rendering of useState and onChange events,
const [keyWord, setKeyWord] = useState('');
<Input
value={
keyWord}
onChange={
(e) => setKeyWord(e.target.value)}
size="large"
style={
{
width: 240, marginRight: 24 }}
placeholder="请输入机具名称"
/>
2. Using the formRef.current.setFieldsValue() method, the new value set will be synchronized to the component for display
//3.设置 表单中某个组件的值（formRef.current.getFieldsValue()中一定要有这个属性名）
//直接
formRef.current.setFieldsValue({
landName: '新值' });
//间接（已知inputId="landName"时）
formRef.current.setFieldsValue({
[inputId]: '新值' });
//组件
<Form className="rtk-form" ref={
formRef}>
<Form.Item
label="地块名称"
name="landName"
colon={
false}
labelAlign="right"
labelCol={
{
span: 4 }}
rules={
[{
required: true, message: '请输入地块名称' }]}>
<Input style={
{
width: '93%', height: 40 }} placeholder="请输入地块名称" />
</Form.Item>
</Form>
Note:
In business processing, sometimes after changing the input value in the Input box for many times, the data may indeed be obtained through let rtkobj =formRef.current.getFieldsValue(), but the printing is not obtained in time in the business method, which is inconvenient for the next step At this time, you can quickly get the specific input value through the parameter e.target.value in the onblur(e) or onChange(e) method for operation.