Компонент Formik, изменяющий неконтролируемый ввод текста типа для управления - PullRequest
Новая
       8

Компонент Formik, изменяющий неконтролируемый ввод текста типа для управления

0 голосов
/ 09 ноября 2018

Я использую Formik с массивом, где элементы передаются от родителя и извлекаются следующим образом: 

updateState (){
    this.state.choices = this.props.choices
    this.state.questionId = this.props.questionId
  }
  render() {
    this.updateState()
    var choices = this.state.choices
    console.log(choices)
    return ( ...

Я изначально инициализирую значения как пустые или 0: 

  constructor(props){
    super(props);
    this.state = {
      choices : [],
      questionId: 0
    };
  }

Хотя кажется, что это должно работать, я получаю сообщение об ошибке, что компонент изменяет неконтролируемый ввод текста типа для управления. Я понимаю, что это из-за моего использования this.state, но я не уверен, как на самом деле это исправить.

То, что я сделал до сих пор, так как я использую Formik, изменил мой экспорт так: 

  export default withFormik({
  mapPropsToValues: (props) => ({
    choices: [{
    id: '',
    value: '',
    weight: '',
    impact: ''}]
  }),
})(Choices)

Неясно, должен ли я вообще отображать реквизиты, или мне следует использовать что-то более похожее на: 

export default withFormik({
  mapPropsToValues: (props) => ({

    id: '',
    value: '',
    weight: '',
    impact: ''
  }),
})(Choices)

Все, что я знаю, - это то, что я не могу щелкнуть, чтобы вставить новый объект в массив, с которым я работаю, поэтому функциональность в основном заморожена, пока я не могу выяснить состояние неконтролируемого элемента ввода.

Есть идеи, где я иду не так?

1 Ответ

0 голосов
/ 09 ноября 2018

Исправление HTML и битов {choices [index] .id} устранило эту ошибку.

например:. 

<div className="col">
                        <label htmlFor={choices[index].id}>{choices[index].id}</label>
                        <Field name={choices[index].id} placeholder={choices[index].value} type="text"/>
                        <ErrorMessage name={choices[index].id} component="div" className="field-error" />
                      </div>
...