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>


    );
}

}

导出默认值重新创建；

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

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表单。参见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>
        );
    }
}

react-admin SelectField清除值onChange

2 个答案: