处理更改在 React Select 中不起作用

Question

我想首先通知我是一个 React 开发的新手。好吧，我正在尝试开发一种用于更新值的表格。一切正常，除了选择字段的更新。

import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import TweakDataForm from "./TweakDataForm";
import {tweakDataUpdateActions} from "./modules/tweakDataUpdateAction"



function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};



const styles = () => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: '#E2E5DE'
  }
});

class OrderServiceTabScreen extends React.Component {
  state = {
    value: 0,
  };
  
  handleChange = (event, value) => {
    this.setState({ value });
  };
  

  render() {
    const { classes,orderTabDataCollections } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            indicatorColor="primary"
            textColor="primary"
            variant="scrollable"
            scrollButtons="auto"
          >

            {Object.keys(orderTabDataCollections).map(keyz =>
            <Tab key={keyz} label={keyz.toUpperCase()} />
   
    )}
            
          </Tabs>
        </AppBar>

        <TabContainer key='0' >
                 <TweakDataForm 
                 key='0' 
                 tweakDataCollection= {orderTabDataCollections['xtd']}
                 handleUpdateData={this.props.tweakDataUpdateActionsRequest}

                 />
              </TabContainer>
      </div>
    );
  }
}

const mapStateToProps = state => ({
...state
});
const matchDispatchToProps = {
  tweakDataUpdateActionsRequest: tweakDataUpdateActions.request
};

OrderServiceTabScreen.propTypes = {
  classes: PropTypes.object.isRequired
};



export default withStyles(styles)(
  connect(
    mapStateToProps,
    matchDispatchToProps
  )(OrderServiceTabScreen))
  

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import Fab from '@material-ui/core/Fab';
import SaveIcon from '@material-ui/icons/Save';
import Select from "@material-ui/core/Select";
import Input from "@material-ui/core/Input";

import { Form, withFormik } from "formik";
// import * as Yup from "yup";

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200,
  },
  dense: {
    marginTop: 19,
  },
  menu: {
    width: 200,
  },
  fab: {
    position: 'absolute',
    bottom: theme.spacing.unit * 5,
    right: theme.spacing.unit * 10,
  }
});

const has_hfp_type_collections = [
  {
    value: 'HX40-D',
    label: 'HX40-D',
  },
  {
    value: 'HX10=D',
    label: 'HX10-D',
  },
  {
    value:'',
    label:'NA'
  }
];

const hfp_type_collections = [
  {
    value: 'TX40-U',
    label: 'TX40-U',
  },
  {
    value: 'TX10-U',
    label: 'TX10-U',
  },
  {
    value:'',
    label:'NA'
  }
];


const formikEnhancer = withFormik({
   }),
  mapPropsToValues: (state) => ({
    hysicalName:state.tweakDataCollection.hysicalName?state.tweakDataCollection.physicalName:"",
    hashfpType:state.tweakDataCollection.hashfpType?state.tweakDataCollection.hashfpType:"",
    address:state.tweakDataCollection.address?state.tweakDataCollection.address:"",
    zocId:state.tweakDataCollection.zocId?state.tweakDataCollection.zocId:"",
    hfpType:state.tweakDataCollection.hfpType?state.tweakDataCollection.hfpType:"",
    powerSupply2:state.tweakDataCollection.powerSupply2?state.tweakDataCollection.powerSupply2:"",
    powerSupply1:state.tweakDataCollection.powerSupply1?state.tweakDataCollection.powerSupply1:"",
    


  }),
  handleSubmit: (values, bag) => {
    console.log('handleSubmit..')
    console.log(values)
    console.log(bag)
  }
});




class TweakDataForm extends React.Component {


  constructor(props) {
    console.log(props);
    super(props);
    this.state = {
      values: props.tweakDataCollection
    };
  }


  render() {
    const { classes,
      tweakDataCollection,
      // handleUpdateData,
      handleChange,
      handleSubmit,
      values,
     } = this.props;

     const handlehfpTypeChange = (event,name) => {
      const newValues = {...values, hfpType: event.target.value}
      this.setState({values: newValues});
      console.log(values);
    };
    
    const handlehashfpTypeChange = (event,name) => {
      const newValues = {...values, hashfpType: event.target.value}
      this.setState({values: newValues});
      console.log(values);
    };
    
    return ( <Form className={classes.container}>

      {tweakDataCollection && Object.keys(tweakDataCollection).map(function(keyz, index) {
        if (keyz === 'address'){
            return <TextField
            id={keyz}
            label={keyz}
            style={{ margin: 8 }}
            fullWidth
            key={keyz}
            name={keyz}
            value={values.address}
            margin="normal"
            onChange={handleChange}
            InputLabelProps={{
              shrink: true,
            }}
          />

        }
        else if(keyz==='hfpType'){

          return <TextField
          id={keyz}
          name={keyz}
          key={keyz}
          select
          label={keyz}
          onChange={e => handlehfpTypeChange(e,keyz)}
          className={classes.textField}
          value={values.sfpType}
          SelectProps={{
            MenuProps: {
              className: classes.menu,
            },
          }}
          margin="normal"
        >
          {hfp_type_collections.map(option => (
            <MenuItem key={option.value} value={option.label}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
        }
        else if (keyz ==='hashfpType'){

          return <TextField
          id={keyz}
          name={keyz}
          key={keyz}
          select
          label={keyz}
          onChange={e => handlehashfpTypeChange(e,keyz)}
          className={classes.textField}
          value={values.hashfpType}
          SelectProps={{
            MenuProps: {
              className: classes.menu,
            },
          }}
          margin="normal"
        >
          {has_hfp_type_collections.map(option => (
            <MenuItem key={option.value} value={option.label}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>

        } 
        else if(keyz === 'hysicalName') {
          return <TextField
          id={keyz}
          name={keyz}
          key={keyz}
          label={keyz}
          className={classes.textField}
          onChange={handleChange}
          value={values.physicalName}
          margin="normal"
        /> 
        }

        else if (keyz === 'locId'){
          return <TextField
          id={keyz}
          name={keyz}
          key={keyz}
          label={keyz}
          className={classes.textField}
          onChange={handleChange}
          value={values.locId}
          margin="normal"
        /> 

        }
        else if(keyz === 'powerSupply1'){
          return <TextField
          id={keyz}
          name={keyz}
          key={keyz}
          label={keyz}
          className={classes.textField}
          onChange={handleChange}
          value={values.powerSupply1}
          margin="normal"
        /> 

        }
        else if(keyz === 'powerSupply2'){
          return <TextField
          id={keyz}
          name={keyz}
          key={keyz}
          label={keyz}
          className={classes.textField}
          onChange={handleChange}
          value={values.powerSupply2}
                    margin="normal"
        /> 

        }
           
          })}

          <div className="clearfix">
          <Fab className={classes.fab} onClick={handleSubmit} color='secondary'>
          <SaveIcon />
          </Fab>
          </div>
          </Form>    
    );
  }
}

TweakDataForm.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(formikEnhancer(TweakDataForm));

所有其他字段都在更改其值，但选择字段没有。它不会使用更新的值更新对象。是否可以帮助我确定实施中缺少什么以反映更改？

Answer 1

我认为您将两个参数而不是一个参数传递给函数，您可以尝试使用 switch 语句使代码可读。

  const handleChange = (e) => {
    console.log("Fruit Selected!!");
    this.setState({ name: e.target.value });
  }

  <select value={this.state.fruit} onChange={handleChange}>
     {options.map((option) => (
        <option value={option.value}>{option.label}</option>
      ))}
  </select>