реагировать-администратор Выберите значение очистки поля onChange

Question

У меня есть форма Создать, в которой другой SelectInput становится видимым в зависимости от выбора другого SelectInput.

В первый раз, когда это происходит, первый вход очищается. Как мне остановить первый выбор из очистки?

Вот код для воссоздания:

import {Create, SelectInput, TextInput, SimpleForm} from 'react-admin';
import React from 'react';

class Recreate extends React.Component {

constructor(props) {
    super(props);
    this.props = props;
    this.state = {visible: false}

}

render() {
    return (

        <Create {...this.props}>
            <SimpleForm>
                <SelectInput source="device" choices={[{id: 'OR', name: 'Oregon'}, {id: 'WA', name: 'Washington'}]}
                             onChange={(event, key, payload) => this.setState({visible: key === 'WA'})}

                />
                {this.state.visible &&  (
                    <SelectInput label={'I am visible from WA'}
                                 source="renderer"
                                 choices={[
                                     {id: 'Seattle', name: 'Seattle'},
                                     {id: 'Olympia', name: 'Olympia'},
                                 ]}
                                 defaultValue={'gs'}/>
                )}
            </SimpleForm>
        </Create>


    );
}

}

экспорт по умолчанию Воссоздать;

Обновление: Попытка исправить на основе ответов:

import {Create, SelectInput, SimpleForm, TextInput} from 'react-admin';
import React from 'react';

const CustomSelectInput = ({onChangeCustomHandler, ...rest}) => (
    <SelectInput onChange={(event, key, payload) => {
        onChangeCustomHandler(key)
    }}
             {...rest}
    />
);

class Recreate extends React.Component {

constructor(props) {
    super(props);
    this.props = props;
    this.state = {visible: false}

}

render() {
    return (

        <Create {...this.props}>
            <SimpleForm>
                <CustomSelectInput source="device"
                                   choices={[{id: 'OR', name: 'Oregon'}, {id: 'WA', name: 'Washington'}]}
                                   onChangeCustomHandler={(key) => this.setState({visible: key === 'WA'})}/>

                {this.state.visible && (
                    <SelectInput label={'I am visible from WA'}
                                 source="renderer"
                                 choices={[
                                     {id: 'Seattle', name: 'Seattle'},
                                     {id: 'Olympia', name: 'Olympia'},
                                 ]}
                                 />
                )}
            </SimpleForm>
        </Create>


    );
}
}

export default Recreate;

Answer 1

Если кто-то все еще сталкивается с вышеуказанной проблемой, ниже приведен мой код. Решение, предоставленное @Yvette и @Gildas, работает отлично.

const CustomSelectInput = ({ onChangeCustomHandler, ...rest }) => (
    <SelectInput onChange={(event, key, payload) => {
        onChangeCustomHandler(key)
    }}
        {...rest}
    />
);

export class Create extends React.Component {
    constructor(props) {
        super(props);
        this.headers = new Headers({
            'Authorization': `Bearer ${localStorage.getItem('token')}`,
            'Content-Type': 'application/json'
        });
        this.state = {
            doctors: [],
            hospitals: [],
            visible: false,
        }
        this.handleOnchange = this.handleOnchange.bind(this);
    }

    handleOnchange(key) { 
        fetch(`URL/${key}`, {
            method: "get",
            headers: this.headers,
        }).then(response => response.json()).then(res => this.setState({ hospitals: res.data, visible: true }));
    }

    componentDidMount() {
        fetch(`URL to fetch data`, {
            method: "get",
            headers: this.headers,
        }).then(response => response.json()).then(res => this.setState({ doctors: res.data }));
    }
    render() {
        const {
            hospitals,
            doctors,
            visible
        } = this.state;

        let hospitalsArr = hospitals.map((hospital) => {
            return {
                id: hospital.id,
                name: hospital.hospital_name
            }
        });

        let doctorsArr = doctors.map((doctor) => {
            return (
                {
                    id: doctor.id,
                    name: `${doctor.user_profile.firstname} ${doctor.user_profile.lastname}`
                }
            )
        });

        return (
            <Create {...this.props}>
                <SimpleForm>

                    <CustomSelectInput source="doctor_id"
                        choices={doctorsArr}
                        onChangeCustomHandler={this.handleOnchange} />

                    {visible ? <SelectInput label="Hospitals" source="hospital_id" choices={hospitalsArr} required /> : null}


                </SimpleForm>
            </Create>
        );
    }
}

Answer 2

Первый вход очищается, вероятно, потому, что вы переопределяете его onChange prop без вызова исходного, который прозрачно вводится SimpleForm.

Вам нужно будет ввести пользовательский компонент SelectDeviceInput, который обернет оригинальное SelectInput, обработает его событие onChange и вызовет другую onXXX опору, которую вы можете передать в том же дескрипторе. Задайте свое состояние в обработчике, который вы передадите этому onXXX подпорке внутри компонента Recreate.

ПРИМЕЧАНИЕ : ваш пользовательский SelectDeviceInput получит реквизит input с обработчиком onChange, который вы должны вызывать для работы приставки. См. https://redux -form.com / 7.4.2 / docs / api / field.md / # 1-a-component

Это один из побочных эффектов SimpleForm, который делает cloneElement своих детей, чтобы облегчить его использование.