Reactjs 更改时对管理员选择字段清除值作出反应

我有一个创建表单，其中另一个SelectInput根据另一个SelectInput的选择而可见

第一次发生这种情况时，第一个输入被清除。如何停止清除第一个select

以下是要重新创建的代码：

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，TextInput，SimpleForm}来自'react admin'；
从“React”导入React；
类。组件{
建造师（道具）{
超级（道具）；
this.props=props；
this.state={visible:false}
}
render（）{
返回(
this.setState（{visible:key==='WA'}）}
/>
{this.state.visible&&(
)}
);
}

}

导出默认值

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

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;

import{Create，SelectInput，SimpleForm，TextInput}来自'react admin'；
从“React”导入React；
常量CustomSelectInput=（{onChangeCustomHandler，…rest}）=>(
{
onChangeCustomHandler（键）
}}
{…休息}
/>
);
类。组件{
建造师（道具）{
超级（道具）；
this.props=props；
this.state={visible:false}
}
render（）{
返回(
this.setState（{visible:key==='WA'}）}/>
{this.state.visible&&(
)}
);
}
}
导出默认值；
第一个输入被清除，可能是因为您重写了它的
onChange
属性，而没有调用由
SimpleForm
透明注入的原始属性

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

注意：您的自定义
选择设备输入
将收到带有
onChange
处理程序的
输入
道具，您必须调用redux表单才能工作。看

这是
SimpleForm
对其子级执行
cloneElement
以简化其使用的一个副作用。
如果有人仍然面临上述问题，下面是我的代码。@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>
        );
    }
}

constCustomSelectInput=（{onChangeCustomHandler，…rest}）=>(
{
onChangeCustomHandler（键）
}}
{…休息}
/>
);
导出类Create.Component{
建造师（道具）{
超级（道具）；
this.headers=新标题({
'Authorization'：'Bearer${localStorage.getItem（'token'）}`，
“内容类型”：“应用程序/json”
});
此.state={
医生：[]，
医院：[]，
可见：假，
}
this.handleOnchange=this.handleOnchange.bind（this）；
}
更改（键）{
fetch（`URL/${key}`{
方法：“获取”，
headers:this.headers，
}).then（response=>response.json（））.then（res=>this.setState（{hospitals:res.data，visible:true}））；
}
componentDidMount（）{
fetch（`URL to fetch data`{
方法：“获取”，
headers:this.headers，
}).then（response=>response.json（））.then（res=>this.setState（{doctors:res.data}））；
}
render（）{
常数{
医院,，
医生们，
看得见的
}=本州；
let hospitalsArr=医院.map（（医院）=>{
返回{
id:hospital.id，
姓名：hospital.hospital\u name
}
});
让doctorsArr=doctors.map（（医生）=>{
返回(
{
id:doctor.id，
名称：`${doctor.user_profile.firstname}${doctor.user_profile.lastname}`
}
)
});
返回(
{可见？：空}
);
}
}
我需要根据状态值显示第二个选择，这在记录中是不可用的。ShowController在这种情况下还能起作用吗？设备不是记录的一部分吗？这是一个sscce-ish示例。实际代码获取所选设备，查看设备类型，然后根据设备类型显示多个特定于设备的输入。所有这些都太多了，无法发布，所以我试图将其归结为更小的内容。希望对你有所帮助，谢谢你的关注。编辑了我的答案，非常好，我会尝试一下，然后发回。