childComponent 中嵌套对象数组 formik 和 handleChange 的问题
Problem with nested objects array formik and handleChange in childComponent
我在 formik 期间将值传递给 handleChange 时遇到问题 validation.So 我创建了一个组件,其数量根据 numChild 的数量添加。我希望当他单击该图标时,他可以将任意数量的技能添加到技能 table.Can 有人指导我如何正确地做到这一点?感谢提示
//Parent component
state = {
numChildren: 0 //
};
addComponent = () => {
this.setState({
numChildren: this.state.numChildren + 1
});
};
render()
{
const children = []; // in loop i try created components
//in this place i try set props to child component but i do something wrong and i get error
for (var i = 0; i < this.state.numChildren; i += 1) {
children.push(<SkillComponent key={i} name1={values.skills.basicAttack.name}
name2={values.skills.specialAttack.name}
damage={values.skills.damage}
handleChange={handleChange}/>);
}
return(
<Formik
initialValues={{
name: '',
// here I try to add as many elements as the user creates skills by SkillComponent with this structure
/*
this my single skill
{
basicAttack: {
name: ''
},
specialAttack: {
name: ''
},
damage: 0
}
*/
skills: [
{
basicAttack: {
name: ''
},
specialAttack: {
name: ''
},
damage: 0
}
]
}}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log("Working")
}}
/>
{({
values
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<Form onSubmit={handleSubmit}>
//some code
...
<FontAwesomeIcon
icon={faPlus}
onClick={this.addComponent}// If the user clicks I will increase the numChild
/>
{children}
</Form>
)
</Formik>
和子组件
class SkillComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.name1}
handleChage={this.props.handleChange}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.name2}
handleChage={this.props.handleChange}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.damage}
handleChage={this.props.handleChange}
/>
</Form.Group>
</div>
);
}
}
export default SkillComponent;
感谢大家的帮助
首先,您试图访问 for
循环中的 values
变量,但那里无法访问该变量。在您的情况下,我将从一些 generateChildren
方法开始,该方法将负责重复您的子组件:
getChildren = (values, handleChange) =>
[...Array(this.state.numChildren)].map(num =>
<SkillComponent
key={num}
name1={values.skills.basicAttack.name}
name2={values.skills.specialAttack.name}
damage={values.skills.damage}
handleChange={handleChange}
/>
)
render() {
<Formik>
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<Form onSubmit={handleSubmit}>
<FontAwesomeIcon icon={faPlus} onClick={this.addComponent} />
{this.getChildren(values, handleChange)}
</Form>
)}
</Formik>
}
我在 formik 期间将值传递给 handleChange 时遇到问题 validation.So 我创建了一个组件,其数量根据 numChild 的数量添加。我希望当他单击该图标时,他可以将任意数量的技能添加到技能 table.Can 有人指导我如何正确地做到这一点?感谢提示
//Parent component
state = {
numChildren: 0 //
};
addComponent = () => {
this.setState({
numChildren: this.state.numChildren + 1
});
};
render()
{
const children = []; // in loop i try created components
//in this place i try set props to child component but i do something wrong and i get error
for (var i = 0; i < this.state.numChildren; i += 1) {
children.push(<SkillComponent key={i} name1={values.skills.basicAttack.name}
name2={values.skills.specialAttack.name}
damage={values.skills.damage}
handleChange={handleChange}/>);
}
return(
<Formik
initialValues={{
name: '',
// here I try to add as many elements as the user creates skills by SkillComponent with this structure
/*
this my single skill
{
basicAttack: {
name: ''
},
specialAttack: {
name: ''
},
damage: 0
}
*/
skills: [
{
basicAttack: {
name: ''
},
specialAttack: {
name: ''
},
damage: 0
}
]
}}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log("Working")
}}
/>
{({
values
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<Form onSubmit={handleSubmit}>
//some code
...
<FontAwesomeIcon
icon={faPlus}
onClick={this.addComponent}// If the user clicks I will increase the numChild
/>
{children}
</Form>
)
</Formik>
和子组件
class SkillComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.name1}
handleChage={this.props.handleChange}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.name2}
handleChage={this.props.handleChange}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.damage}
handleChage={this.props.handleChange}
/>
</Form.Group>
</div>
);
}
}
export default SkillComponent;
感谢大家的帮助
首先,您试图访问 for
循环中的 values
变量,但那里无法访问该变量。在您的情况下,我将从一些 generateChildren
方法开始,该方法将负责重复您的子组件:
getChildren = (values, handleChange) =>
[...Array(this.state.numChildren)].map(num =>
<SkillComponent
key={num}
name1={values.skills.basicAttack.name}
name2={values.skills.specialAttack.name}
damage={values.skills.damage}
handleChange={handleChange}
/>
)
render() {
<Formik>
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<Form onSubmit={handleSubmit}>
<FontAwesomeIcon icon={faPlus} onClick={this.addComponent} />
{this.getChildren(values, handleChange)}
</Form>
)}
</Formik>
}