首页 文章

React Components状态vs props动态输入

提问于
浏览 次
0

我一直在用ReactJS和ES6进行几天的实验，并创建了几个组件，即 <InputText /> ， <InputNumber /> ， <InputEmail /> ，这些组件正在组件 <ContactsEdit /> 中使用 .

看起来很奇怪，即使我已经阅读了很多教程，我的子组件仍然拒绝 render() {this.state.Firstname} 尽管我尝试 componentWillMount ， componentDidMount ， this.setState ， this.state 与 this.forceUpdate() ，但它们会很好地渲染 this.props.Firstname

我欢迎任何建议或帮助 . 来源可以在github找到

谢谢 ：）

`export default class ContactsEdit extends 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>
    )
}

}

`

`export default class InputText extends 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>
    )
}

}

javascript reactjs react-jsx

2 回答

  • 1

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

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

    使用ES6类构造函数替换 componentWillMount

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

    回复于
  • 0

    我发布主题和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回购，因此有更多专业知识的人可以检查和帮助） .

    但非常奇怪的是，即使我理解这不是最佳实践，但 this.props 解决方案仍然有效 .

    回复于

相关问题