如何使用FormDataConsumer更改TextInput值

Question

我尝试使用FormDataConsumer动态更改基于另一个输入的TextInput值时遇到一些麻烦。

我有一个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'）更改输入值？

有人可以帮忙吗？提前致谢。

Answer 1

无法访问完整的记录用户选择是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}
            />

现在你可以使用redux-form更改函数qazxsw poi。

所以对我来说，我有用户为账单选择供应商，我将该供应商的数据存储到状态，然后有几个更改调用，为用户自动设置供应商的信息。

Answer 2

我只是尝试了这个，它对我有用......这不是你的确切代码，但概念是相同的，应该适合你，如果不回复你所尝试的，我将修改我的例子。

as detailed in RA's docs

好笑，我记得有这个问题并没有让它工作所以我做了一些不同的事情，但我想当我看到你的问题时我会重新审视..

Answer 3

好吧，我使用了这样的解决方案：

<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>

react-admin - How to set input values based on another

形成：

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>