React:在相邻组件之间进行通信

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (11)

它由除App.js文件之外的4个组件组成。我试图让我的Checkbox.js组件与我的组件通信SubmitButton.js是否被检查,以便只有在用户选中该框时才会启用提交按钮。我尝试使用道具,你可以在下面的代码中看到,但我可能正在做这个可怕的错误。任何人都可以帮我学习正确的方法吗?不确定是否重要,但我使用的是Material-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;

Checkbox.js

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;

SubmitButton.js

    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>
    );
  }
}
提问于
用户回答回答于

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

在你的情况下,App如果选中复选框,则保持一些状态,然后通过props将值和更新功能传递到复选框。然后,您可以App根据App状态中复选框指示符的值切换按钮

换句话说,您在全局窗口对象上使用指示器时有正确的想法,但是,使用父组件而不是全局变量。如果您发现需要真正实现“全局”或可从应用程序的各个部分访问,请查看Redux之类的状态管理

function App() {
    const [state, setState] = React.useState({
        checked: false,
  });
  return (
   <div>
     <Container maxWidth="md">
     <NavBar />
     <Form />
     <br />
     <Checkbox onChange={handleChange('checked')} checked={checked}/> 
     <SubmitButton isEnabled={checked}/> 
     </Container>     
   </div>
  );
}

扫码关注云+社区

领取腾讯云代金券