javascript - childComponent中嵌套对象数组formik和handleChange的问题

Question

我在formik验证期间将值传递给handleChange时遇到问题。所以我创建了一个组件，其数量取决于numChild的数量。而且我想当他单击图标时，他可以将任意数量的技能添加到技能表中。有人可以指导我如何正确操作吗？感谢您的提示

//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;

感谢所有的帮助

标签： javascriptreactjsformik

Answer 1

首先，您尝试访问在循环中无法访问values的变量。for在您的情况下，我将从一些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>
}