在输入字段中未获得所需的值React redux或ReactJS

Question

 import React, { Component } from 'react'; let _ = require('lodash'); import {bindActionCreators} from "redux"; import {connect} from 'react-redux'; import {fetchedZonesEdit} from '../../actions/'; class InfoRow extends Component { constructor(props){ super(props); this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { this.setState({ [event.target.name]: event.target.value }); } render() { return ( <tr> <td> {this.props.zone} </td> <td>{this.props.zoneValue} <input type="text" className="form-control" defaultValue={this.props.zoneValue} value={this.props.name} name={this.props.zone} onChange={this.handleInputChange} /> </td> </tr> ) } } class ZoneDetailsEdit extends Component { render() { const rows = []; let a = this.props.ezn; Object.keys(this.props.ezn).map((keyName, keyIndex) =>{ return rows.push(<InfoRow zone={keyName} zoneValue={a[keyName].toString()} key={keyIndex}/>) }); return ( <div className="col-md-6"> <div className=""> <table className="table table-clear"> <tbody> {rows} </tbody> </table> </div> <div className="row px-1" > <div className="px-2"> <button className="btn btn-sm btn-info">Save</button> </div></div> </div> ) } } class ZoneDetailEditComponent extends Component { componentWillMount = () => { this.props.fetchedZonesEdit(this.props.location.query.id); }; render() { return ( <div className="container px-3 mr-3"> <div className="row"> <div className="col-md-6 col-md-offset-3"><h1>Edit Tag Information</h1></div> </div> <br/> <br/> { this.props.ezn != null? <div> <ZoneDetailsEdit ezn={this.props.ezn}/> </div> : <center><br /><h1><img src={'img/avatars/default.gif'} alt="Loading"/><br />Loading</h1></center> } </div> ) } } function mapStateToProps(state) { return { ezn: state.zones } } function matchDispatchToProps(dispatch){ return bindActionCreators({fetchedZonesEdit: fetchedZonesEdit}, dispatch); } export default connect(mapStateToProps, matchDispatchToProps)(ZoneDetailEditComponent); 

这是我提供的代码段，我现在正在做的是从api提取数据并显示在输入字段中，但问题是数据已正确提取，但是当我在输入字段外打印时，它可以正常工作，但是当我在输入字段中输入默认值不起作用屏幕快照也提供了打开页面时设置的默认值，但刷新后效果很好

Answer 1

defaultValue应该仅在不受控制的组件上使用 。

而不是使用defaultValue ，而是为商店中的name分配一个默认值。

另外，如果您使用的是redux，请不要使用this.setState 。 您正在将新值分配给从未读过的this.state.zone 。

Answer 2

由于您使用的是受控组件，因此无需使用defaultValue，将传递的props分配给该值就足够了。

同样使用redux，更好的做法是将UI状态存储在localState中，并将所有其他状态存储在redux存储中。

为此，您需要在将值传递到最上层父级后，调度一个更新相应的reduce的动作。

另外，您没有将任何prop作为name传递给InfoRow组件，并且由于defaultValue仅在创建时才呈现，因此看不到更新。

您的代码必须看起来像

import React, { Component } from 'react';
let _ = require('lodash');

import {bindActionCreators} from "redux";
import {connect} from 'react-redux';

import {fetchedZonesEdit} from '../../actions/';

class InfoRow extends Component {

  constructor(props){
    super(props); 
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {

        this.props.handleChange(this.props.zone, event.target.value);


    }

    render() {
        return (

            <tr>
                <td>
                  {this.props.zone}
                </td>
                <td>{this.props.zoneValue}
                <input type="text"
                   className="form-control"
                   value={this.props.zoneValue}
                   name={this.props.zone}
                   onChange={this.handleInputChange}
                />
                </td>
            </tr>
        )
    }
}

class ZoneDetailsEdit extends Component {

    handleChange(zone, value) {
         //pass it to the parent and then fire an action from there to update this value in the store

    }
    render() {

        const rows = [];
        let a = this.props.ezn;


       Object.keys(this.props.ezn).map((keyName, keyIndex) =>{

          return rows.push(<InfoRow zone={keyName} zoneValue={a[keyName].toString()} handleChange={()=> this.handleChange}key={keyIndex}/>)
       });

        return (


            <div className="col-md-6">
                <div className="">

                  <table className="table table-clear">
                    <tbody>
                      {rows}
                    </tbody>
                  </table>
                 </div>
                 <div className="row px-1" >
                      <div className="px-2">
                        <button className="btn btn-sm btn-info">Save</button>
                 </div></div>
          </div>

        )

    }


}

另外，您也无需将lifeCycle函数与arrows绑定