react-admin SelectField 清除值 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

第一个输入被清除可能是因为您覆盖了它的onChange 属性，而没有调用由SimpleForm 透明注入的原始属性。

您需要引入一个自定义的SelectDeviceInput 组件，该组件将包装原始SelectInput，处理其onChange 事件并调用另一个您可以传入同一句柄的onXXX 道具。在您将传递给Recreate 组件内的onXXX 属性的处理程序中设置您的状态。

注意：您的自定义 SelectDeviceInput 将收到带有 onChange 处理程序的 input 属性，您必须调用 redux-form 才能工作。见https://redux-form.com/7.4.2/docs/api/field.md/#1-a-component

这是SimpleForm 对其子级进行cloneElement 以简化其使用的一个副作用。

Answer 2

如果有人仍然面临上述问题，下面是我的代码。 @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>
        );
    }
}