javascript - 为什么我无法获得值选择和输入？

Question

问题是我无法获取值customInput 和customSelect 并将其写入状态？我无法显示我尝试连接 react dashboard material-ui 的所有代码。如果我对正常输入执行相同操作并选择，我将获得状态数据。

有人可以帮忙吗？我不能给出一个有效的例子，太多的代码......

import React from "react";
import { connect } from 'react-redux';
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import CustomInput from "components/CustomInput/CustomInput.jsx";
import Button from "components/CustomButtons/Button.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardBody from "components/Card/CardBody.jsx";
import CardFooter from "components/Card/CardFooter.jsx";
import FormControl from "@material-ui/core/FormControl/FormControl";

import CustomSelect from "../../components/CustomSelect/CustomSelect";
import "../../components/CustomSelect/Select.css";

class NewExercise extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Enter text',
    };
  }
  handleChange = (event) => {
    this.setState({
      value: event.target.value,
    });
  };
  handleClick = () => {
    this.setState({
      value: '',
    });
    console.log(this.state);
  };
  render() {
    console.log('store', this.props.newExercise);
    const { classes } = this.props;
    return (
      <div>
        <GridContainer>
          <GridItem xs={12} sm={12} md={12} lg={12}>
            <form >
              <Card>
                <CardHeader color="primary">
                  <h4 className={classes.cardTitleWhite}>Create new exercise</h4>
                  <p className={classes.cardCategoryWhite}>Please, add a new exercise name and measurement type</p>
                </CardHeader>
                <CardBody>
                  <GridContainer>
                    <GridItem xs={12} sm={12} md={12}>
                      <CustomInput
                        value={this.state.value}
                        onChange={this.handleChange}
                        labelText="Exercise Name"
                        id="exercise"
                        formControlProps={{
                          fullWidth: true
                        }}
                      />
                    </GridItem>
                    <GridItem xs={12} sm={12} md={12}>
                      <FormControl style={{width: "100%"}} className={classes.formControl}>
                        <div className="materialSelect">
                          <CustomSelect
                            labelText="Measurement"
                            id="custom-select"
                            formControlProps={{
                              fullWidth: true
                            }}
                          >
                            <option value="kg">kilograms</option>
                            <option value="min">minutes</option>
                            <option value="m">meters</option>
                          </CustomSelect>
                        </div>
                      </FormControl>
                    </GridItem>
                  </GridContainer>
                </CardBody>
                <CardFooter>
                  <Button color="primary" onClick={this.handleClick}> Create Exercise</Button>
               </CardFooter>
              </Card>
            </form>
          </GridItem>
        </GridContainer>
      </div>
    );
  }
}
export default connect (
  state => ({
    newExercise: state
  }),
  dispatch => ({})
) (withStyles(styles)(NewExercise));

//material-ui dashboard react 的自定义输入

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
// @material-ui/icons
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
// core components
import customInputStyle from "assets/jss/material-dashboard- 
react/components/customInputStyle.jsx";

function CustomInput({ ...props }) {
  const {
    classes,
    formControlProps,
    labelText,
    id,
    labelProps,
    inputProps,
    error,
    success
  } = props;
  const labelClasses = classNames({
    [" " + classes.labelRootError]: error,
    [" " + classes.labelRootSuccess]: success && !error
  });
  const underlineClasses = classNames({
    [classes.underlineError]: error,
    [classes.underlineSuccess]: success && !error,
    [classes.underline]: true
  });
  const marginTop = classNames({
    [classes.marginTop]: labelText === undefined
  });
  return (
    <FormControl
      {...formControlProps}
      className={formControlProps.className + " " + classes.formControl}
>
      {labelText !== undefined ? (
        <InputLabel
          className={classes.labelRoot + labelClasses}
          htmlFor={id}
          {...labelProps}
        >
          {labelText}
        </InputLabel>
      ) : null}
      <Input
        classes={{
          root: marginTop,
          disabled: classes.disabled,
          underline: underlineClasses
        }}
        id={id}
        {...inputProps}
      />
      {error ? (
        <Clear className={classes.feedback + " " + classes.labelRootError} />
      ) : success ? (
        <Check className={classes.feedback + " " + classes.labelRootSuccess} />
      ) : null}
    </FormControl>
  );
}
CustomInput.propTypes = {
  classes: PropTypes.object.isRequired,
  labelText: PropTypes.node,
  labelProps: PropTypes.object,
  id: PropTypes.string,
  inputProps: PropTypes.object,
  formControlProps: PropTypes.object,
  error: PropTypes.bool,
  success: PropTypes.bool
};

export default withStyles(customInputStyle)(CustomInput);

Answer 1

检查这个例子:

//custom component

import React from 'react'
import PropTypes from 'prop-types'
import Radio from '@material-ui/core/Radio'

export const BmRadio = (props) => {
    return <Radio onClick={this.props.onClick} {...props} />
}

BmRadio.defaultProps = {
    color: 'primary'
}

BmRadio.propTypes = {
    onClick: PropTypes.func,
    color: PropTypes.oneOf(['default', 'primary', 'secondary']),
    icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
    checkedIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
    value: PropTypes.string,
    disabled: PropTypes.bool,
    onChange: PropTypes.func,
    type: PropTypes.string
}

//main component

import React, {PureComponent} from 'react'
import {BmRadio} from '@components'

class MainComponent extends PureComponent {
  handleOnClick =(event)=>{
    console.log(event) //event from Radio button then click in main component
  }
  render(){
    return(
      <BmRadio onClick={this.handleOnClick}/>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

试试 event.currentTarget.value。如果我正确理解您的问题，也许会有所帮助

如果你想从自定义组件中获取值，你需要在自定义组件中传递onChange属性。

const {
    classes,
    formControlProps,
    labelText,
    id,
    labelProps,
    inputProps,
    error,
    success
    onChange //get like props
  } = props;

//and in component

<Input
        classes={{
          root: marginTop,
          disabled: classes.disabled,
          underline: underlineClasses
        }}
        id={id}
        onChange={onChange}
        {...inputProps}
      />

//and in place, where you render custom component create change handler and pass it in this component like onChange={this.handleOnChange}

handleOnChange = (event) => {
 this.setState({
  value = event.target.value
})
}