我将 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)
目前还不清楚我是否应该映射 Prop ,或者我是否应该使用类似的东西:
export default withFormik({
mapPropsToValues: (props) => ({
id: '',
value: '',
weight: '',
impact: ''
}),
})(Choices)
我所知道的是,我无法单击将新对象推送到我正在使用的数组上,因此功能基本上被卡住,直到我能够弄清楚不受控制的输入元素的状态为止。
知道我哪里出错了吗?
最佳答案
修复 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>
关于javascript - Formik 组件更改要控制的文本类型的不受控输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53217463/