React组件状态与道具动态输入

React Components state vs props Dynamic Input

本文关键字：动态 输入 组件 状态 React      更新时间：2023-09-26

我已经用ReactJS和ES6做了几天的实验，并创建了几个组件，即<InputText />、<InputNumber />、<InputEmail />，这些组件正在组件<ContactsEdit />中使用。

尽管我读了很多教程，但我的子组件拒绝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>
    )
}

}`

this.props直到运行之后才存在于构造函数中，将this绑定到类的实例。使用从父级（在参数中）传入的props

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

使用ES6类构造函数替换componentWillMount

此外，您不应直接修改this.state。调用render()不会引起反应。仅在构造函数中设置初始状态。其他地方请致电this.setState({ data: newData })。

我发布这个主题和GitHub链接的原因是我已经尝试了一切。我知道使用this.state不是最佳实践，我将其与this.forceUpdate结合使用，因为this.setState()不起作用。

我也知道componentWillUpdate()已经在ES6中被替换了，但删除它并只使用constructor()对我来说是行不通的

我也试过

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

但这只会导致将值硬编码到我的组件中。我尝试过使用promise返回值：

constructor(props) {
    super(props);
    MyPromise( (resolve) => {
       this.setState({ fieldName : resolve})
    }
// …

但这也没有奏效。

所以我开始怀疑我的gulpfile是否有问题（因此提供了GitHub repo，这样有更多专业知识的人可能会检查并提供帮助）。

非常奇怪的是，尽管我知道this.props解决方案不是最佳实践，但它仍然有效。

相关文章：