时间戳

首页 > 解决方案 > React Redux 表单输入编辑返回不受控输入的错误消息

reactjs - React Redux 表单输入编辑返回不受控输入的错误消息

问题描述

React Redux表单输入编辑返回不受控输入的错误消息

下面的代码使用react redux在来自数据库的表单输入中显示记录，它工作正常。当我尝试编辑姓氏的表单输入时，它不会编辑，而是显示错误

组件正在更改要控制的文本类型的不受控输入。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

这是如何在表单输入中显示我想编辑的结果

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>  



      handleChange = (name) => (event) => {
   this.setState({ [name]: event.target.value });
}

/*
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
*/

下面是完整的 react redux 代码

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class Edit1 extends React.Component {



constructor(props) {
        super(props);

this.state = {
name: '',
lastName: '',

        };
        this.handleSubmit = this.handleSubmit.bind(this);  


        this.handleChange = this.handleChange.bind(this);

    }

    componentDidMount() {    
this.props.dispatch(userActions.getAll_Rec());


    }

handleChange = (name) => (event) => {
   this.setState({ [name]: event.target.value });
}

/*
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
*/




    handleSubmit(event) {
        event.preventDefault();

       //process form submit
    }







    render() {
        const { pg1, pgs1 } = this.props;
        return (




 <div className="list">
                <div >

Name: {pgs1.items1 &&  this.props.pgs1.items1[0].lastName}<br />

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>                     

            </div>

</div>

        );
    }
}



function mapStateToProps(state) {
    const { pgs1 } = state;
    const { pg1 } = state;
    return {
        pg1,
        pgs1
    };
}


const connectedEdit1 = connect(mapStateToProps)(Edit1);
export { connectedEdit1 as Edit1 };

标签： reactjsredux

解决方案

最后解决我的输入表单不编辑问题的方法是用 defaultValue{} 选项替换表单输入值{}。我利用 Solanki 在这里发布的解决方案/答案React Input Type not editable

不是这个了

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>

但这解决了我的问题

<input type="text" className="form-control" defaultValue={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>

通过实现 defaultValue{}，我现在可以一直编辑表单值。

推荐阅读