有两个组件container
and presenter
.
下面的代码显示单个复选框状态变为 true,并且另一个复选框也正在更新。那么,如何处理具有状态的多个复选框?
容器:
export default class ApplyFormContainer extends Component {
constructor(props) {
super(props);
this.state = {
form: {
gender: '',
checked: false,
},
};
}
handleCheckBox = e => {
const {
target: { checked },
} = e;
this.setState({
form: {
...this.state.form,
checked,
},
});
};
handleGender = id => {
this.setState({
form: {
...this.state.form,
gender: id,
},
});
};
render() {
const { handleGender, handleCheckBox } = this;
const { form } = this.state;
return (
<Container>
<ApplyFormPresenter
form={form}
handleGender={handleGender}
handleCheckBox={handleCheckBox}
/>
</Container>
);
}
}
主持人:
import React from 'react';
import styled from 'styled-components';
const Form = styled.form`
display: grid;
`;
const Flex = styled.div`
display: flex;
align-items: center;
justify-content: center;
label {
margin: 2rem;
/* input[type='checkbox'] {
display: none;
}
} */
}
`;
const ApplyFormPresenter = ({ form, handleGender, handleCheckBox }) => {
return (
<div>
<Form>
<Flex>
<label>
<span>TEST</span>
<input
type="checkbox"
value="love"
onChange={handleCheckBox}
checked={form.checked}
/>
</label>{' '}
<label>
<span>TEST</span>
<input
type="checkbox"
value="friend"
onChange={handleCheckBox}
checked={form.checked}
/>
</label>{' '}
<label>
<span>TEST</span>
<input
type="checkbox"
value="money"
onChange={handleCheckBox}
checked={form.checked}
/>
</label>
</Flex>
</Form>
</div>
);
};
做这件事有很多种方法。我的建议:您希望将值保存在对象中并映射其键。
这是一个使用的解决方案Hooks https://reactjs.org/docs/hooks-intro.html:
function App() {
const [state, setState] = React.useState({
gender: false,
love: false
});
const handleToggle = ({ target }) =>
setState(s => ({ ...s, [target.name]: !s[target.name] }));
return (
<div>
{Object.keys(state).map(key => (
<input
type="checkbox"
onChange={handleToggle}
key={key}
name={key}
checked={state[key]}
/>
))}
</div>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)