javascript - 嵌套对象数组formik和childComponent中的handleChange的问题(Problem with nested objects array formik and handleChange in childComponent)

Question

I have a problem passing value to handleChange during formik validation.So I created a component whose quantity is added depending on the number of numChild.

(我在formik验证期间将值传递给handleChange时遇到问题。因此，我创建了一个组件，其数量取决于numChild的数量。)

And I would like when he clicks the icon he can add any number of skills to the skills table.Can someone guide me how to do it correctly?

(我想当他单击该图标时，可以在技能表中添加任意数量的技能。有人可以指导我如何正确地进行操作吗？)

Thanks for the tips

(谢谢你的提示)

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

And child component

(和子组件)

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;

Thanks for all the help

(谢谢你的帮助)

  ask by Zaisty translate from so

Answer 1

First of all you're trying to access values variable in for loop which is not accessible there.

(首先，您尝试在for循环中访问其中无法访问的values变量。)

In your case I would start with some generateChildren method which will be responsible for repeating your children components:

(在您的情况下，我将从一些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>
}