Question

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

即使我已经阅读了很多教程，即使我尝试了render()，{this.state.Firstname}，{{1}，我的孩子组件也拒绝componentWillMount componentDidMount，这似乎很奇怪} {}，this.setState与this.state，但它们会很好地呈现this.forceUpdate()

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

找到

谢谢:)

` export default class ContactsEdit extends React.Component {

this.props.Firstname

}

`

` export默认类InputText扩展了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>
    )
}

} `

Answer 1

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

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

使用ES6类构造函数

替换

componentWillMount

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

Answer 2

我发布主题和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解决方案仍然有效。

React Components状态vs props动态输入

2 个答案: