2017-01-28 93 views
1

当用户单击提交按钮时,我需要将这些输入字段绑定到Message接口的实例,为此,我在类
中创建了一个Message对象,并设置了输入表单中的值(keepNameUpdated())。“this”在React组件事件处理程序中未定义

当我输入的东西,它抛出

Uncaught TypeError: Cannot read property 'message' of undefined

所以它说:“这”是不确定的,但为什么呢?

这里是我的代码:

 export class IMessage { 
      Name: string; 
      Surname: string; 
     } 



    export default class Contact extends React.Component<IContactProperties, IWebPartState> { 
     message : IMessage; 
     constructor(props: IContactProperties, state: IWebPartState) { 
      super(props); 
      this.message = new IMessage(); 
     } 
public render(): JSX.Element { 
      return (
       <div className="row"> 
        <div className="form-group col-md-6"> 
         <label >Name</label> 
         <input type="text" className="form-control" onChange={this.keepNameUpdated} id="name" placeholder="Adiniz" /> 
         </div> 
         <div className="form-group col-md-6"> 
         <label >Surname</label> 
         <input type="text" className="form-control" id="surname" placeholder="Soyadiniz" /> 
         </div> 
         <div className="form-group col-md-12"> 
         <button type="button" className="btn btn-success" onClick={this.clickSubmit}><i className="fa fa-save"></i> Submit</button> 
         </div> 
        </div> 
       ); 
    } 

     private keepNameUpdated(e) { 
      this.message.Name=e.target.value; 
      } 
      private keepSurnameUpdated(e) { 
      this.message.Surname=e.target.value; 
      } 

为什么这个参考未定义,? enter image description here

+0

位。渲染函数在哪里? – x0n

+0

我很简单,这个返回jsx元素方法actualy属于渲染功能 – TyForHelpDude

+0

比完整不完整:) – x0n

回答

1

IIRC,您必须绑定处理函数,以便他们的this的概念引用React组件的实例。所以,在你的构造函数中添加这些行:

this.keepNameUpdated = this.keepNameUpdated.bind(this); this.keepSurnameUpdated = this.keepSurnameUpdated.bind(this);

来源:缺少代码https://facebook.github.io/react/

+0

是的它看起来解决了我的问题,但为什么我必须明确指定它?如果我有100个物业怎么办? – TyForHelpDude

+1

这只是事件处理程序在JavaScript和浏览器DOM中工作的方式。我不知道React足够好来帮助你,但是也许在框架中有一些帮助函数可以帮你做...阅读更多文档:) – x0n

相关问题