React-Admin：如何发送从 API 调用自动填充的输入值？答案

【问题标题】：React-Admin: How to send input values that have been auto filled from an API call?React-Admin：如何发送从 API 调用自动填充的输入值？
【发布时间】：2020-05-06 20:26:21
【问题描述】：

我有一个输入“A”，它从 API 获取地址数据并根据该数据自动填充输入“B”“C”和“D”，但在输入完成后，我尝试发送该表单到我的后端，没有发送这些自动填充的输入，只发送输入“A”。此外，如果我手动编辑任何输入（删除字符、添加空格、更改值），我编辑的输入会发送到我的后端。

我正在使用减速器来存储状态。我使用的输入都是普通的 react-admin TextInput 组件。

代码如下：

const AutoFill = () => {
  const [searching, setSearching] = useState(false);
  const [error, setError] = useState(false);
  const [stateData, setStateData] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
    {
      cep: '      -   ',
      address: '',
      number: '',
      neighborhood: '',
      city: '',
      state: '',
    }
  );

  const FormControl = (event) => {
    const { name, value } = event.target;
    setStateData({ [name]: value });
  };

  const SearchControl = (event) => {
    const { name, value } = event.target;
    setStateData({ [name]: value });
    if (value && !value.includes('_')) {
      setSearching(true);
      setStateData({ state: '...' });
      setStateData({ city: '...' });
      setStateData({ neighborhood: '...' });
      setStateData({ address: '...' });
      cep(value.replace('-', '')).then(
        (result) => {
          setSearching(false);
          setError(false);
          setStateData({ state: result.state });
          setStateData({ city: result.city });
          setStateData({ neighborhood: result.neighborhood });
          setStateData({ address: result.street });
        },
        () => {
          setSearching(false);
          setError(true);
          setStateData({ state: '' });
          setStateData({ city: '' });
          setStateData({ neighborhood: '' });
          setStateData({ address: '' });
        }
      );
    }
  };

  return (
    <>
      <TextInput
        source="cep"
        error={error}
        value={stateData.cep}
        onChange={SearchControl}
      />
      <TextInput
        source="address"
        disabled={searching}
        value={stateData.address}
        onChange={FormControl}
      />
      <TextInput
        source="number"
        disabled={searching}
        value={stateData.number}
        onChange={FormControl}
      />
      <TextInput
        source="neighborhood"
        disabled={searching}
        value={stateData.neighborhood}
        onChange={FormControl}
      />
      <TextInput
        source="state"
        disabled={searching}
        value={stateData.state}
        onChange={FormControl}
      />
      <TextInput
        source="city"
        disabled={searching}
        value={stateData.city}
        onChange={FormControl}
      />
    </>
  );
};

export const Create = (props) => {
  return (
    <Create {...props}>
      <SimpleForm>
        <NumberInput label="Value" source="price" />
        <AutoFill />
        <RichTextInput label="Description" source="description" />
      </SimpleForm>
    </Create>
  );
};

【问题讨论】：

你能在这里分享代码吗？
@AnasKhurshid 是的，当然，我刚刚编辑了问题，抱歉耽搁了！
Mr.Henriko 请检查我的回答。
@podolski721 问题不在于状态本身，而在于 react-admin，我知道我的状态是用 API 返回的值更新的，但是状态和 react-admin 之间的通信所以我可以将数据发送到后端很奇怪。
我添加了我的更改。请检查一下。

标签： reactjs react-admin

【解决方案1】：

您将需要使用 React Final Form 的 FormState 和 Form 解决方案。例如，将使用我的代码的 sn-ps。

1) 获取表单值

    const formState = useFormState();
    const form = useForm();

    const {
        asset_system_parent_id: majorSystem,
        classification,
    } = formState.values;

2) 设置 useEffect 来观察表单域的变化：

    useEffect(() => {
        const setFluidEnd = async () => {
          DO SOMETHING!!!!!
        };

        if ('Fluid End Maintenance' === classification) {
            setFluidEnd();
        }
    }, [classification, form, notify]);

3) 使用 form.change (+ form.batch 如果你需要更新多个输入)

    useEffect(() => {
        const setFluidEnd = async () => {
            await requestGetList('asset-systems', 'id', 'ASC', 500, {
                description: 'Fluid End',
                relationship: 'parent',
            })
                .then(res => {
                    form.change('asset_system_parent_id', res.data[0].id);
                })
                .catch(error => {
                    notify(`System Assets not found`, 'warning');
                });
        };

        if ('Fluid End Maintenance' === classification) {
            setFluidEnd();
        }
    }, [classification, form, notify]);

您可以在此处阅读有关 api 的更多信息：https://final-form.org/docs/final-form/types/FormApi

【讨论】：

谢谢！这对我来说效果很好，必须从输入中删除 reducer、onChange 和值，因为最终表单会处理这些。
很高兴为您提供帮助。另一个提示：有时最好直接在输入的 onChange 中执行此操作，特别是如果您想在清除值时执行某些操作：onChange={value => !value && form.change('quantity', 0.01)}

【解决方案2】：

请使用此代码。
-index.js 文件

import axios from "axios";

export const setInputValue = (data) => {
    return axios.get(`https://www.example.com/profile`)
        .then((response) => {
            return response.data;
        });
};

-component.js

 return setInputValue(value).then(() => {
           this.setState(() => ({
                loading: false
            }));
        });

...
render(){
return (
...
   <input type="text" onClick={e => this.onClick(e)} value={this.state.value}/>
..
)}
...

react-admin.php

...
public function setInputValue(value)
    {
        try {
            $user->set(value);
            return response()->json(["result" => "successfully!"]);
        } catch (\Exception $e) {
            return getErrorResponse($e);
        }
    }

【讨论】：