reactjs - reset On 解决在 React 中循环的课程

Question

我正在尝试将依赖值更改时的值重置为 SelectInput。但它当然会循环和打破页面。在这里找到我到目前为止所做的代码。

如何在我的代码中省略它。

import {
    SelectInput,
    required
} from 'react-admin';
import data from '../data';
import { withStyles } from '@material-ui/core/styles';
import React, { Component } from 'react';
import { DependentInput } from 'aor-dependent-input';

const initialState = {
    way_of_join: data.way_of_join
};

class WayOfJoinSelectInput extends Component {

    constructor(props) {
        super(props)
        this.state = initialState;
    }

    reset(){
        this.setState({initialState});
    }

    switchSector = (props) => {
        if (props !== undefined && Object.keys(props).length > 0) {
            var value = props.General_Service.service_sector;
            this.reset();
            switch (value) {
                case 'sleas':
                    this.state.way_of_join.splice(4, 3)
                    break;
                case 'sltes':
                    this.state.way_of_join.splice(2, 1)
                    break;
            }
        }

    };

    render() {
        return (
            <DependentInput resolve={this.switchSector}>
                <SelectInput
                    source="General_Service.way_join"
                    label="Way of Join"
                    validate={required()}
                    // onChange={this.reset()}
                    choices={this.state.way_of_join}
                />
            </DependentInput>
        )
    }
}

export default withStyles(styles)(WayOfJoinSelectInput);

在这里找到什么错误。

标签： reactjsreact-admin

Answer 1

import {
SelectInput,
required
   } from 'react-admin';
  import data from '../data';
  import { withStyles } from '@material-ui/core/styles';
  import React, { Component } from 'react';
   import { DependentInput } from 'aor-dependent-input';

const initialState = {
   way_of_join: data.way_of_join
  };

 class WayOfJoinSelectInput extends Component {

constructor(props) {
    super(props)
    this.state = initialState;
    this.reset=this.reset.bind(this);
}

reset(){
    this.setState({initialState});
}

switchSector = (props) => {
    if (props !== undefined && Object.keys(props).length > 0) {
        var value = props.General_Service.service_sector;
        this.reset();
        switch (value) {
            case 'sleas':
                this.state.way_of_join.splice(4, 3)
                break;
            case 'sltes':
                this.state.way_of_join.splice(2, 1)
                break;
        }
    }

};

render() {
    return (
        <DependentInput resolve={this.switchSector}>
            <SelectInput
                source="General_Service.way_join"
                label="Way of Join"
                validate={required()}
                 onChange={this.reset}
                choices={this.state.way_of_join}
            />
        </DependentInput>
    )
}
}

export default withStyles(styles)(WayOfJoinSelectInput);

您需要在构造函数中绑定函数或使用箭头函数。