嗨,我是新的反应,并写了一个小的应用程序与一个形式,以获得一些实践。它由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>
);
}
}
发布于 2019-06-11 22:24:54
最基本和最直接的方法是将共享功能提升到父组件中,并将值和函数作为道具传递给子组件。
在您的示例中,在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>
);
}
发布于 2019-06-13 11:38:32
我的问题的解决方案是以下代码:
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 />
<br />
<Form />
<Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
<SubmitButton isEnabled={state.checkbox} />
</Container>
</div>
);
}
export default App;
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;
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();
return (
<div>
<Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled}>
Submit
</Button>
</div>
);
}
https://stackoverflow.com/questions/56545832
复制相似问题