Как изменить значения TextInput с помощью FormDataConsumer - PullRequest
Новая
       8

Как изменить значения TextInput с помощью FormDataConsumer

0 голосов
/ 25 апреля 2019

У меня возникли проблемы при попытке динамического изменения значения TextInput на основе другого ввода с использованием FormDataConsumer.

У меня есть ReferenceInput, который устанавливает AutocompleteInput с некоторыми параметрами, как показано ниже: 

<ReferenceInput id="nome" label="Portaauto" source="Portaauto" name="Portaauto" reference="acl-pegaProtocolosConhecidos" alwaysOn >
    <AutocompleteInput id="protocolo" name="Portaautoinput" source="protocolo" translateChoice={false} optionText="nome" />
</ReferenceInput>

Бэкэнд возвращает эту запись: 

[{"id":"http","nome":"http(80)","porta":"80","protocolo":"tcp"},
{"id":"https","nome":"https(443)","porta":"443","protocolo":"tcp"},
{"id":"ntp","nome":"ntp(123)","porta":"123","protocolo":"udp"},
{"id":"dns","nome":"dns(53)","porta":"53","protocolo":"udp"},
{"id":"custom","nome":"custom(10-100)","porta":"10-100","protocolo":"gre"}]

Этот ввод работает как положено, но мне нужно изменить 2 других ввода, используя выбор пользователя.Итак, если пользователь выбирает «http», для одного ввода должно быть «80», а для другого - «tcp».

Я попытался просто изменить только один вход, но я могудаже не установить значение TextInput динамически, используя код ниже: 

const getPortSugestion = (values) => {
    console.log(values)
    return values
};

<FormDataConsumer id="nome">
                {({ formData, record, ...rest }) =>
                    <TextInput
                        name="city"
                        source={getPortSugestion(formData.Portaauto)}
                        value={getPortSugestion(formData.Portaauto)}
                        {...rest}
                    />
                }
</FormDataConsumer>

Используя этот код, «источник» изменяется (с «nome»), но «значение» не изменяется ...

Итак, как я могу изменить значение TextInput?

И как я могу получить доступ к другим атрибутам из моей записи, чтобы я мог изменять входные значения, используя другие поля из моей записи ('porta' и 'protocolo ')?

Кто-нибудь может помочь?Заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 01 мая 2019

Отсутствие доступа к полной записи, которую выбирает пользователь, - одна из моих самых больших проблем с RA. В результате я сделал свой собственный CustomAutocomplete, который позволяет мне захватить всю выбранную запись и сохранить ее в состоянии.

Если вы хотите воссоздать это единственное изменение, которое вам нужно сделать.

YourCustomAutocomplete.js 

handleSuggestionSelected = (event, { suggestion, method }) => {
    const { input, getSelected } = this.props;

    const inputValue = this.getSuggestionValue(suggestion);
    if (input && input.onChange) {
        input.onChange(inputValue);
    }

    if(getSelected) {
        getSelected(suggestion);
    }

    if (method === 'enter') {
        event.preventDefault();
    }
};

Тогда в вашей форме или компоненте формы есть базовая функция, которая будет храниться в состоянии:

YourForm.js 

    getSelected = selectedItem => {
    this.setState({ selectedItem });
  };


             <AutocompleteInput
                inputValueMatcher={inputValueMatcher}
                shouldRenderSuggestions={(val) => {return val.trim().length > 2}}
                limitChoicesToValue={true}
                optionText="name"
                getSelected={this.getSelected}
            />

Теперь вы можете использовать функцию изменения избыточной формы , как подробно описано в документации RA .

Так что для меня пользователь выбирает поставщика для счета, я сохраняю данные этого поставщика в состояние, а затем выполняю несколько вызовов изменения, которые автоматически устанавливают информацию поставщика для пользователя.

1 голос
/ 28 апреля 2019

Я только что попробовал это, и это сработало для меня ... Это не ваш точный код, но концепция та же самая, должна работать для вас, если не опубликовать обратно то, что вы пытались, и я изменю свой пример. 

<TextInput source="dynamic" />
<AutocompleteInput source="category" choices={[
    { id: 'programming', name: 'Programming' },
    { id: 'lifestyle', name: 'Lifestyle' },
    { id: 'photography', name: 'Photography' },
]} />

<FormDataConsumer>
    {({formData, dispatch, ...rest}) => {
        console.log(formData.category);
        if (formData.category && formData.category === 'programming') {
            return (
                formData.dynamic="bang"
            );
        }
    }}
</FormDataConsumer>

Забавно, я помню, что у меня была эта проблема, и я не получал ее, поэтому я сделал что-то другое, но подумал, что вернусь, когда увижу ваш вопрос ..

0 голосов
/ 03 мая 2019

Ну, я использовал решение, подобное этому: act-admin - Как установить входные значения на основе другого 

const customOnChange = (event)=>{
    const tokenSessionItem = "oidc.user:" + OidcSettings.authority + ":" + OidcSettings.client_id;
    const token = sessionStorage.getItem(tokenSessionItem);

    if (event.Portaauto) {
        if (event.Portaauto !== formBeforeState_Portaauto) {
            const toFetch = dataProviderURL + `/getProtocols/${event.Portaauto}`;
            fetch(toFetch, { method: 'GET', headers: {'content-type': 'application/json', 'Authorization' : `${token}`}})
            .then(response => response.json())
            .then(data => {
                //console.log(data[0].id)
                event.porta = data[0].porta
                event.protocolo = data[0].protocolo
            });
            formBeforeState_Portaauto = event.Portaauto 
        }
    }
}

Форма: 

export const AcladvCreate = props => (
    <Create {...props}>
        <SimpleForm onChange={customOnChange}>
              <CustomProtocolSugestion />
        </SimpleForm>
    </Create>

Пользовательский элемент: 

Class CustomProtocolSugestion extends React.Component {
    render() {
        return (
            <div>   
                    <div>
                        <FormDataConsumer>
                        {({ formData, ...rest }) => (
                            formData.protocolo !== "ip" ?
                            <TextInput source="porta" label="Porta" validate={validaPorta} />
                            : null
                        )}
                        </FormDataConsumer>
                    </div>

                    <ReferenceInput id="protocolo" label="Protocolo" source="protocolo" reference="acl-protocolosPermitidos" resource="acl-protocolosPermitidos" style={hiddenSelectStylePre}>
                        <SelectInput translateChoice={false} optionText="id"/>
                    </ReferenceInput>

                    <ReferenceInput id="Portaauto" label="?" source="Portaauto" reference="acl-pegaProtocolosConhecidos" resource="acl-pegaProtocolosConhecidos" allowEmpty style={hiddenSelectStyleCurrSelect} >
                        <SelectInput translateChoice={false} optionText="id" />
                    </ReferenceInput>


            </div>
        );
    }
}
...