Кнопка onClick внутри Formik Form не дает ожидаемых значений при передаче значений в родительский компонент - PullRequest
Новая
       1

Кнопка onClick внутри Formik Form не дает ожидаемых значений при передаче значений в родительский компонент

0 голосов
/ 04 мая 2019

У меня есть дочерний компонент Formik, и мне нужно передать данные в мой родительский компонент. В дочернем компоненте Formik у меня есть две кнопки: 1. кнопка onSubmit, которая отправляет форму и переходит на следующую страницу и 2. кнопка onClick, которая переходит назад к последней странице

Когда я отправляю форму и перехожу на следующую страницу, все работает и проверяется. Однако, когда я возвращаюсь назад к последней странице, данные, которые я передаю (это массив []), преобразуются в какой-то класс, когда я консоль регистрирую их.

Я сузил проблему до того, что 2-я кнопка - это onClick, а не тип onSubmit. Если я сделаю тип 2-й кнопки кнопкой типа «отправить», она работает, но вызывает компонент onSubmit в компоненте Formik. Я также попытался сделать это: 

<Button type="submit" onClick={() => this.submitAction = 'b'}>Back</Button>
<Button type="submit" onClick={() => this.submitAction = 'a'}>Next</Button>

and

onSubmit={values => {
if (this.submitAction === 'a') {this.props.nextStep('post1', values)}
if (this.submitAction === 'b') {this.props.lastStep('post1', values)}
}}

Однако проблема этого подхода заключается в том, что оба события кнопки проходят через событие validationschema, а это не то, что мне нужно.

Вот мой полный код:

Дочерний компонент: 

class Post2 extends React.Component {
  submitAction = undefined;
  render() {
    const { classes } = this.props;
    return (
      <div>
        <Formik
          initialValues={{ studyType: this.props.initValues.studyType }}
          onSubmit={values => {
            this.props.nextStep('post2', values)
          }} //here is my onSubmit event that gets called when the form submits
          render={({ values }) => (
            <Form>
            <div>
              <FieldArray
                name="studyType"
                render={arrayHelpers => (
                  <div>
                    {studyTypes.map(index => (
                      <div key={index}>
                        <label>
                          <input
                            name="studyType"
                            type="checkbox"
                            value={index}
                            checked={values.studyType.includes(index)}
                            onChange={e => {
                              if (e.target.checked) arrayHelpers.push(index);
                              else {
                                const idx = values.studyType.indexOf(index);
                                arrayHelpers.remove(idx);
                              }
                            }}
                          />
                          {index}
                        </label> 
                      </div>  
                    ))}
                  </div>
                )} 
              />
              <Button onClick={(value) => this.props.lastStep('post2', value)}>Back</Button> //here are my two buttons
              <Button type="submit">Next</Button> //here are my two buttons
            </div>
            </Form>
          )}
        />
      </div>
    );
  }
}

Родительские функции и код состояния: 

class FormikStepper extends React.Component {
  state = {
    activeStep: 1,
    post0: {
      title: '',
      description: '',  
    },
    post1: {
      category: [],   
    },
  };

  nextStep = (post, values) => { 
    this.setState({ activeStep: this.state.activeStep + 1, [post]: values })   
  }  //next step function which is called from child component
  lastStep = (post, values) => {   
    this.setState({ activeStep: this.state.activeStep - 1, [post]: values })   
  }  //last step function which is called from child component
...