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

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

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

单击按钮时

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

React：如何从Material-UI TextField组件获取值

1 个答案: