Question

嗨，我是React的新手，写了一个无法正常运行的小应用程序。我试图使我的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>
    );
  }
}

Answer 1

1。

props.isEnabled是布尔值，而不是字符串。
其他语句是多余的。
disabled='true'不是字符串，它是布尔值。
isEnabled是多余的，因为disabled已经支持@material-ui/core/Button，可以轻松地重复使用

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

2-复选框未使用道具中的实际value和onChange处理程序

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

3-您对Checkbox的命名很糟糕，组件名称与@material-ui/core/Checkbox冲突

Answer 2

1。您没有正常使用道具

您将道具传递给了Checkbox（这是从Checkboxes组件获得的）

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

但是在Checkbox.js中，您没有使用此道具。请这样更改。

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;

您已经在Checkbox中使用过name属性，因此可以动态传递名称。
event.target.name是“复选框”。因此状态将存储在state.checkbox

//...

const [state, setState] = React.useState({
    checkbox: false,
});

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

//...

<Checkbox onChange={handleChange} checked={state.checkbox} />

//...

2.SubmitButton.js错误

您传递了具有布尔类型的isEnabled道具。你应该比较这样的道具

if(props.isEnabled)

在Button中禁用的属性也需要布尔类型。
并且不需要拆分jsx代码。

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

Answer 3

最后的答案是，在进行bkm412建议的更改之后，我必须添加以下内容。我将name属性添加到Checkbox元素，并将state.checkbox添加到SubmitButton元素

<Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
<SubmitButton isEnabled={state.checkbox} />

反应：同级组件通信问题

3 个答案: