反應的組分狀態VS道具動態輸入

我一直在試驗ReactJS和ES6幾天和創建的耦合部件即<InputText />，<InputNumber />，<InputEmail />，即在組件<ContactsEdit />被使用。反應的組分狀態VS道具動態輸入

看來真是奇怪，即使我讀了很多教程我的子組件拒絕render()的{this.state.Firstname}即使我試過componentWillMount，componentDidMount，this.setState，this.state與this.forceUpdate()，但它們就會罰款this.props.Firstname

我會歡迎任何形式的建議或幫助。源可以在github

謝謝:)

` 出口默認類ContactsEdit擴展React.Component {

constructor(props) { 
    super(props); 

    this.contactId = this.props.params.id; 
    this.persistence = new Persistence('mock'); 

    this.state = { 
     contact : {} 
    }; 

} 

componentDidMount() { 
    this.persistence.getContactById(this.contactId).then((resolve) => { 
     this.setState({ contact : resolve.data }); 
     this.data = resolve.data; 
    }).catch((reject) => { 
     console.log(reject); 
    }) ; 

    this.forceUpdate(); 
} 

onChange(id,newValue) { 
    this.state.contact[ id ] = newValue; 
    this.forceUpdate(); 
} 

saveRecord(object) { 
    console.log(this.state); 
} 

render() { 
    return (   
     <div className="ContactsEdit"> 
      <h2>Contact Edit (Parent) id : {this.props.params.id}, FullName : {this.state.contact.Firstname} {this.state.contact.Lastname}</h2> 
      <div className="row">      
       <InputText id="Firstname" fieldName={this.state.contact.Firstname} labelName="Firstname" onChange={this.onChange.bind(this)} divClass="col-lg-3 col-md-3 col-sm-3 col-xs-6" /> 
       <InputText id="Lastname" fieldName={this.state.contact.Lastname} labelName="Lastname" onChange={this.onChange.bind(this)} divClass="col-lg-3 col-md-3 col-sm-3 col-xs-6" /> 
       <InputText id="SocSecId" fieldName={this.state.contact.SocSecId} labelName="SocSecId" onChange={this.onChange.bind(this)} divClass="col-lg-3 col-md-3 col-sm-3 col-xs-6" /> 
       <InputText id="DriverLicId" fieldName={this.state.contact.DriverLicId} labelName="DriverLicId" onChange={this.onChange.bind(this)} divClass="col-lg-3 col-md-3 col-sm-3 col-xs-6" /> 
      </div> 

     </div> 
    ) 
}

}

` 出口默認發現類InputText擴展了React.Component {

constructor(props) { 
    super(props);   
    this.state = { fieldName : this.props.fieldname}; 
} 

componentWillMount() { 
    //this.state.fieldName = this.props.fieldname; 
    //this.forceUpdate(); 
} 

updateState(evt) { 
    //this.setState({fieldName : evt.target.value}); 
    this.props.onChange(evt.target.id, evt.target.value ); 
} 

render() { 
    return (
     <div className={this.props.divClass}> 
      <hr /> 
      <label> {this.props.labelName} </label> 
      <div>{this.props.fieldName}</div> 
      <div>{this.state.fieldName}</div> 
      <input 
       type="text" 
       id={this.props.id} 
       value={this.props.fieldName} 
       onChange={this.updateState.bind(this)} 
       className="form-control" 
      /> 
     </div> 
    ) 
}

} `

來源

2015-12-29 Sotiris Karanasios

歡迎來到Stack！只要在你的問題中發佈相關的代碼，這將（希望）刪除downvotes並得到你需要的答案。 – azium

謝謝:)我會這樣做:) –

this.props沒有在構造函數中存在，直到其運行後，結合this的類的實例。使用在從父傳遞（在參數）的props

constructor (props) { 
    super(props) 
    this.state = { fieldName: props.fieldname } 
}

componentWillMount被替換使用ES6類的構造函數

而且你不應該直接修改this.state。它不會引起render()的反應。只在構造函數中設置初始狀態。在其他地方，請致電this.setState({ data: newData })。

來源

2015-12-30 08:30:28 azium

我發佈主題和GitHub鏈接的原因是我已經嘗試了一切。我知道使用this.state不是最佳做法，我已將它與this.forceUpdate結合使用，因爲this.setState()不起作用。

我也知道，componentWillUpdate()已被ES6取代，但刪除它，只使用constructor()不會爲我做這項工作。

我也曾嘗試

constructor(props) { 
    super(props); 
    this.setState({ fieldName : 'something' }) 
// …

但只導致硬編碼值到我的組件。我曾嘗試使用承諾返回價值：

constructor(props) { 
    super(props); 

    MyPromise((resolve) => { 
     this.setState({ fieldName : resolve}) 
    } 
// …

但這也沒有工作。

所以我開始想知道，如果我的大文件有問題（因此提供GitHub回購，所以有更多專業知識的人可能會檢查和幫助）。

儘管我明白這不是最佳做法，但奇怪的是，this.props解決方案仍然有效。

來源

2015-12-30 11:37:46

反應的組分狀態VS道具動態輸入

回答

相關問題