沒有得到期望的值陣營終極版或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的數據，並顯示在輸入字段，但問題是數據被正確提取，但當我打印輸入字段外，它工作正常，但當我輸入輸入字段作爲默認值，它不會工作 截圖還提供了 當打開頁面的默認值是前頁設置，但當我t刷新它工作正常

Answer 1

由於您使用的是受控組件，因此您無需使用defaultValue，因此將傳遞給該值的道具分配即可。

同樣使用redux，更好的做法是將UI狀態存儲在localState中，並將所有其他用戶存儲在redux存儲中。

要做到這一點，你需要派遣的是值傳遞給最頂層父

而且你不傳遞任何道具爲name到InfoRow成分，因爲默認值後更新corresponsing減速渲染僅在行動創建的時候，你沒有看到更新。

你的代碼必須看起來像

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> 

     ) 

    } 


} 

也沒有必要爲你生命週期功能綁定arrows

Answer 2

defaultValue只能用於Uncontrolled components。

不是使用defaultValue，而是將默認值分配給商店中的name。

另外，如果您使用的是redux，則不要使用this.setState。您正在爲您從未讀過的this.state.zone分配新值。