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

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

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

它由除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>
  );
}

热门问答

数据万象持久化在JavaScript SDK中的问题?

可以的,有Domain参数。请参考:https://github.com/tencentyun/cos-js-sdk-v5/blob/master/csp/csp.html#L56

有谁用unity 3d 实现过对象的上传储存和者下载?

我不是米

腾讯 · 工程师 (已认证)

对象存储工程师
推荐

请正确填写bucket参数,bucket参数里面不要带上-appid

cos.sliceUploadFile支持断点续传吗?

如果用的是 cos-js-sdk,那么 cos.restartTask 是会断点续传的,用法没有问题。 PS: sdk 使用可以参考 demo.js https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/demo...... 展开详请

使用独立H5接入人脸核身,在微信浏览器拍摄视频按钮无法点击?

旺仔小小鹿

社区 · 运营 (已认证)

Less is more
推荐

使用iframe会有问题 ,微信有限制,不允许使用iframe调用jsapi摄像头 ,微信里,不能用iframe

ios应该都不行的,安卓需要看是什么浏览器。

云服务器中ping不可达,请教一下如何恢复?

推荐已采纳
本地主机 ping 不通实例可能由以下问题导致: 目标服务器的设置不正确 域名没有正确解析 链路故障 在确保本地网络正常的前提下(即您可以正常 ping 通其他网站),可根据以下操作进行排查: 检查实例是否配置公网 IP 检查安全组设置 检查系统设置 检查域名是否备案 检查域名解...... 展开详请

为什么加固之后生成四个文件?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

选择最后一个_legu_aligned_signed.apk 文件,这个是加固并已重签名的文件。

扫码关注云+社区

领取腾讯云代金券