React:如何从Material-UI TextField组件获取值 [英] React: How to get values from Material-UI TextField components

问题描述

我有一个带有Form组件，SubmitButton组件和我的父(App.js)组件的小型应用程序.当用户单击提交"按钮时，我想获取表单组件上3个字段的值，并将其传递给App.js组件.我不确定如何使用 onClick()或类似的东西来触发事件，以从我的表单中获取表单字段值，然后将其通过 props 传递给App.js组件和 console.log()它们.我刚接触React时，有人可以提供一些指导吗?

I have a small app with a Form component, a SubmitButton component, and my parent (App.js) component. When the user clicks the submit button I want to get the values of the 3 fields on my form component and pass them to my App.js component. I am not sure how to trigger the event using onClick() or something like it to grab the form field values from my form and then pass them via props to the App.js component and console.log() them. Can anyone provide some guidance as I am very new to React?

App.js

import React from 'react';
import NavBar from './Components/NavBar'
import Form from './Components/InfoForm'
import SubmitButton from './Components/SubmitButton';
import Container from '@material-ui/core/Container';
import Checkbox from './Components/Checkbox';
import './App.css';

function App() {

  const [state, setState] = React.useState({
    checkbox: false,
});

const handleChange = event => {
  setState({ ...state, [event.target.name]: event.target.checked });
};

  return (
   <div>
     <Container maxWidth="md">
     <NavBar />             
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} onClick={} /> 
     </Container>     
   </div>
  );
}

export default App;

InfoForm.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

function Form() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    name: '',
    email: '',
    months: ''
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (

    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        id="outlined-name"
        label="Name"
        className={classes.textField}
        value={values.name}
        onChange={handleChange('name')}
        margin="normal"
        variant="outlined"
      />

      <TextField
        id="outlined-email-input"
        label="Email"
        className={classes.textField}
        value={values.email}
        type="email"
        name="email"
        autoComplete="email"
        margin="normal"
        variant="outlined"
      />      

      <TextField
        id="outlined-select-months"
        select
        label="Select"
        className={classes.textField}
        value={values.months}
        onChange={handleChange('months')}
        SelectProps={{
          MenuProps: {
            className: classes.menu,
          },
        }}
        helperText="Month looking to book"
        margin="normal"
        variant="outlined"
      >
        {months.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    </form>
  );
}

export default Form;

SubmitButton.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';


export default function ContainedButtons(props) {

    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled} type="submit">
          Submit
        </Button>
      </div>
    );
}

推荐答案

如果您不想移动组件，可以将状态处理程序从infoForm.js中移除

If you don't want to move your components you can take the state handler out of infoForm.js

将此代码移动到app.js并将处理程序名称更改为"handleChangeForm"(可选名称)

move this code to app.js and change the handler name to "handleChangeForm" (optional name)

  const [values, setValues] = React.useState({
    name: '',
    email: '',
    months: ''
  });

  const handleChangeForm = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

然后，您可以将处理程序和infoForm中的值用作如下属性:

then you can use the handler and the values in infoForm as properties like this:

 <Form values={values} handleChangeForm={handleChangeForm}/>

还需要将值作为属性发送到按钮组件

also you need to send to your button component the values as properties

在表单组件内部，您应该像这样破坏道具:

Inside form component you should destructure the props like this:

  const { values, handleChangeForm } = props;

  return (
    <form noValidate autoComplete="off"> .....

表单内的

onChange事件示例

onChange event example inside form

onChange={handleChangeForm("name")}

最后，您将值连接到了buttom组件，并且可以使用一个函数像这样

Finally you have the values connected to your buttom component and you can use a function like this

  const onClickBtn = () => {
    console.log(props.values);
  };

单击按钮时

  <Button
        variant="contained"
        color="primary"
        disabled={!props.isEnabled}
        type="submit"
        onClick={onClickBtn}
      >
        Submit
      </Button>

这篇关于React:如何从Material-UI TextField组件获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！