react-admin SelectField清除值onChange

Question

我有一个Create表单，其中另一个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>


    );
}

}

export default重新创建;

更新：根据答案尝试修复：

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道具，你可以通过相同的句柄。在你将传递给onXXX组件内的Recreate道具的处理程序中设置你的状态。

注意：您的自定义SelectDeviceInput将获得input道具与onChange处理程序，您必须调用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>
        );
    }
}