React-Admin: как отправить входные значения, которые были автоматически заполнены из вызова API? - PullRequest
Новая
       11

React-Admin: как отправить входные значения, которые были автоматически заполнены из вызова API?

2 голосов
/ 06 мая 2020

У меня есть вход 'A', который извлекает данные адреса из API и автоматически заполняет входы 'B' 'C' и 'D' на основе этих данных, но после того, как входы были заполнены, и я пытаюсь отправить эту форму на мой сервер, ни один из этих автоматически заполненных входов не отправляется, отправляется только вход 'A'. Кроме того, если я вручную редактирую любой из входов (удаляю символ, добавляю пробел, изменяю значение), те, которые я редактировал, отправляются на мой сервер.

Я использую редуктор для сохранения состояния . Входные данные, которые я использую, - это обычные компоненты TextInput для response-admin.

Вот код: 

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>
  );
};

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Вам нужно будет использовать решения FormState и Form от React Final Form. Например, буду использовать фрагменты моего кода.

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

0 голосов
/ 07 мая 2020

Пожалуйста, используйте этот код. -index. js файл 

import axios from "axios";

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

-компонент. js

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

...
render(){
return (
...
   <input type="text" onClick={e => this.onClick(e)} value={this.state.value}/>
..
)}
...
  • response-admin. php 
...
public function setInputValue(value)
    {
        try {
            $user->set(value);
            return response()->json(["result" => "successfully!"]);
        } catch (\Exception $e) {
            return getErrorResponse($e);
        }
    }
...