Javascript React：同级组件之间的通信_Javascript_Reactjs_Material Ui

Javascript React：同级组件之间的通信

javascript reactjs material-ui

Javascript React：同级组件之间的通信,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,嗨，我是一个新的反应，写了一个小应用程序与一个形式得到一些实践。它由4个组件组成，而不是App.js文件。我正在尝试让我的Checkbox.js组件与我的SubmitButton.js组件通信，无论是否选中该组件，以便只有用户选中该框时才会启用submit按钮。正如你在下面的代码中看到的那样，我尝试过使用道具，但我可能犯了可怕的错误。有人能帮我学习正确的方法吗？不确定这是否重要，但我正在使用材质UI库。谢谢 App.js import React from 'react'; import Nav

嗨，我是一个新的反应，写了一个小应用程序与一个形式得到一些实践。它由4个组件组成，而不是

App.js

文件。我正在尝试让我的

Checkbox.js

组件与我的

SubmitButton.js

组件通信，无论是否选中该组件，以便只有用户选中该框时才会启用submit按钮。正如你在下面的代码中看到的那样，我尝试过使用道具，但我可能犯了可怕的错误。有人能帮我学习正确的方法吗？不确定这是否重要，但我正在使用材质UI库。谢谢

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({
    checked: false,
});

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

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

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes() {

  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value="checked"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  if (props.isEnabled === 'true') {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button}>
          Submit
        </Button>
      </div>
    );
  } else 
  {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = 'true'>
          Submit
        </Button>
      </div>
    );
  }
}

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 />
     <br />
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} /> 
     </Container>     
   </div>
  );
}

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes(props) {
  const {onChange, checked} = props;
  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value={checked}
        onChange={onChange} 
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();

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

从“React”导入React；
从“./Components/NavBar”导入导航栏
从“./Components/InfoForm”导入表单
从“./Components/SubmitButton”导入SubmitButton；
从“@material ui/core/Container”导入容器；
从“./Components/Checkbox”导入复选框；
导入“/App.css”；
函数App（）{
常量[状态，设置状态]=React.useState({
勾选：假，
});
const handleChange=name=>event=>{
setState（{…状态，[名称]：event.target.checked}）；
};
返回(


);
}
导出默认应用程序；

Checkbox.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({
    checked: false,
});

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

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

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes() {

  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value="checked"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  if (props.isEnabled === 'true') {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button}>
          Submit
        </Button>
      </div>
    );
  } else 
  {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = 'true'>
          Submit
        </Button>
      </div>
    );
  }
}

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 />
     <br />
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} /> 
     </Container>     
   </div>
  );
}

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes(props) {
  const {onChange, checked} = props;
  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value={checked}
        onChange={onChange} 
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();

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

从“React”导入React；
从“@material ui/core/Checkbox”导入复选框；
函数复选框（）{
返回(
勾选此框表示您同意上述所有条款和条件。
);
}
导出默认复选框；

SubmitButton.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({
    checked: false,
});

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

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

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes() {

  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value="checked"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  if (props.isEnabled === 'true') {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button}>
          Submit
        </Button>
      </div>
    );
  } else 
  {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = 'true'>
          Submit
        </Button>
      </div>
    );
  }
}

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 />
     <br />
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} /> 
     </Container>     
   </div>
  );
}

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes(props) {
  const {onChange, checked} = props;
  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value={checked}
        onChange={onChange} 
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();

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

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
const useStyles=makeStyles（主题=>({
按钮：{margin:theme.space（1），}，
输入：{显示：'无'，}，
}));
导出包含按钮（道具）的默认功能{
const classes=useStyles（）；
如果（props.isEnabled=='true'）{
返回(
提交
);
}否则
{
返回(
提交
);
}
}

最基本、最直接的方法是将共享功能提升到父组件中，并将值和函数作为道具传递给子组件

在您的情况下，在

App

中设置一些状态来维护复选框是否选中，然后通过道具将值和更新功能传递到复选框中。然后，您也可以根据

App

状态中复选框指示器的值在

App

中切换按钮

换句话说，在全局窗口对象上使用指示器的想法是正确的，但是，使用父组件而不是全局变量。当你发现需要真正使事情“全球化”或从应用程序的各个部分访问时，看看Redux之类的状态管理软件

e、 g

函数应用程序（）{
常量[状态，设置状态]=React.useState({
勾选：假，
});
返回(


);
}

我的问题的解决方案是以下代码：

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({
    checked: false,
});

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

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

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes() {

  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value="checked"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  if (props.isEnabled === 'true') {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button}>
          Submit
        </Button>
      </div>
    );
  } else 
  {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = 'true'>
          Submit
        </Button>
      </div>
    );
  }
}

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 />
     <br />
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} /> 
     </Container>     
   </div>
  );
}

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes(props) {
  const {onChange, checked} = props;
  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value={checked}
        onChange={onChange} 
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();

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

从“React”导入React；
从“./Components/NavBar”导入导航栏
从“./Components/InfoForm”导入表单
从“./Components/SubmitButton”导入SubmitButton；
从“@material ui/core/Container”导入容器；
从“./Components/Checkbox”导入复选框；
导入“/App.css”；
函数App（）{
常量[状态，设置状态]=React.useState({
复选框：false，
});
const handleChange=事件=>{
setState（{…state，[event.target.name]：event.target.checked}）；
};
返回(


);
}
导出默认应用程序；

Checkbox.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({
    checked: false,
});

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

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

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes() {

  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value="checked"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  if (props.isEnabled === 'true') {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button}>
          Submit
        </Button>
      </div>
    );
  } else 
  {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = 'true'>
          Submit
        </Button>
      </div>
    );
  }
}

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 />
     <br />
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} /> 
     </Container>     
   </div>
  );
}

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes(props) {
  const {onChange, checked} = props;
  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value={checked}
        onChange={onChange} 
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();

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

从“React”导入React；
从“@material ui/core/Checkbox”导入复选框；
功能复选框（道具）{
const{onChange，checked}=props；
返回(
勾选此框表示您同意上述所有条款和条件。
);
}
导出默认复选框；

SubmitButton.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({
    checked: false,
});

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

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

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes() {

  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value="checked"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  if (props.isEnabled === 'true') {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button}>
          Submit
        </Button>
      </div>
    );
  } else 
  {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = 'true'>
          Submit
        </Button>
      </div>
    );
  }
}

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 />
     <br />
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} /> 
     </Container>     
   </div>
  );
}

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes(props) {
  const {onChange, checked} = props;
  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value={checked}
        onChange={onChange} 
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

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

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();

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

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
const useStyles=makeStyles（主题=>({
按钮：{margin:theme.space（1），}，
输入：{显示：'无'，}，
}));
导出包含按钮（道具）的默认功能{
const classes=useStyles（）；
返回(
提交
);
}

利用道具。道具是组件之间通信状态的方式。将选中的状态值作为道具发送到

checkbox.js

文件中的

。谢谢Andy，但您介意提供一个代码示例吗？这将非常有帮助，因为我不熟悉从父级通过道具传递的ff逻辑概念。因此，您已经在Checkbox.js中进行了此操作，您正在传递状态。选中

复选框

，您只需将该状态提升一级，进入应用程序组件，因此，您的提交按钮可以使用它。我添加了一个示例，它不是一个完整的工作解决方案，但应该会让您了解该州的位置以及如何通过PROPST传递给孩子们非常感谢Andy！让我试一试，我会让你知道事情的进展。我真的很感谢你的帮助…我在OP中修改了代码以反映你建议的更改，但它仍然不起作用。如果你看到我做错了什么，你能看一下让我知道吗？