Dos formas de obtener los datos en el formulario Formulario (tome Entrada como ejemplo)
1. Obtenga todos los datos en el formulario Formulario a través de 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. Obtenga todos los datos en el formulario Formulario a través de Form.useForm(), el uso es el mismo que el anterior, sin agregar corriente en el medio
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>
Nota: Los dos métodos anteriores se utilizan según la situación, siempre que se puedan obtener los datos, se pueden utilizar.
Hay dos formas de monitorear o sincronizar los datos en el formulario Formulario (como el valor en Entrada)
1. Utilizando la representación tradicional de los eventos useState y onChange,
const [keyWord, setKeyWord] = useState('');
<Input
value={
keyWord}
onChange={
(e) => setKeyWord(e.target.value)}
size="large"
style={
{
width: 240, marginRight: 24 }}
placeholder="请输入机具名称"
/>
2. Utilizando el método formRef.current.setFieldsValue(), el nuevo conjunto de valores se sincronizará con el componente para su visualización.
//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>
Nota:
En el procesamiento empresarial, a veces, después de cambiar el valor de entrada en el cuadro Entrada varias veces, los datos pueden obtenerse a través de let rtkobj =formRef.current.getFieldsValue(), pero la impresión no se obtiene a tiempo en el método empresarial. , lo cual es un inconveniente para el siguiente paso En este momento, puede obtener rápidamente el valor de entrada específico a través del parámetro e.target.value en el método onblur(e) o onChange(e) para la operación.