javascript - react : How to get values from Material-UI TextField components

Question

我有一个小型应用程序，其中包含一个 Form 组件、一个 SubmitButton 组件和我的父 (App.js) 组件。当用户单击提交按钮时，我想获取表单组件上 3 个字段的值并将它们传递给我的 App.js 组件。我不确定如何使用 onClick() 或类似的东西来触发事件以从我的表单中获取表单字段值，然后通过 props 将它们传递给应用程序。 js 组件和 console.log() 它们。任何人都可以提供一些指导，因为我是 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;

提交按钮.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>
    );
}

Answer 1

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

将此代码移至 app.js 并将处理程序名称更改为“handleChangeForm”(可选名称)

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

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

然后您可以像这样使用处理程序和 infoForm 中的值作为属性:

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

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

在表单组件内部，你应该像这样解构 Prop :

  const { values, handleChangeForm } = props;

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

表单内的 onChange 事件示例

onChange={handleChangeForm("name")}

最后，您将值连接到您的按钮组件，您可以使用一个函数像这样

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

点击按钮时

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