Реакция: Как получить значения из компонентов TextField Material-UI

Question

У меня есть небольшое приложение с компонентом Form, компонентом SubmitButton и моим родительским компонентом (App.js).Когда пользователь нажимает кнопку отправки, я хочу получить значения 3 полей в моем компоненте формы и передать их в мой компонент App.js.Я не уверен, как вызвать событие, используя onClick() или что-то подобное, чтобы получить значения полей формы из моей формы, а затем передать их через props компоненту App.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;

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>
    );
}

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}/>

также вам нужно отправить компоненту кнопки значения как свойства

Внутри компонента формы вы должны деструктурировать реквизит следующим образом:

  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>