reactjs - 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 透明注入(inject)的原始属性。

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

注意:您的自定义 SelectDeviceInput 将收到一个 input Prop ，其中包含您必须为 redux 调用的 onChange 处理程序-工作的形式。参见 https://redux-form.com/7.4.2/docs/api/field.md/#1-a-component

这是 SimpleForm 对其子元素执行 cloneElement 以简化其使用的一个副作用。