Question

我是Reactjs的新手，它试图更改按钮单击事件后用户在文本框中输入的值文本。但是在按钮单击事件之后，我在handleChange（e）函数上收到错误“ TypeError：无法读取未定义的属性'值'”。有人可以帮助我解决这里发生的问题吗？

这是我正在使用的组件：

 Constructor(props){
    super();
    this.state={
             typedtext: 'Nothing'
           }
      };

    handleClick(){
              this.handleChange(this.state.typedtext)
             }

    handleChange(e){
            this.setState({ typedtext: e.target.value });  
              }

    render(){

     return(

        <div>
         <label> Typed Value is : {this.state.typedtext} </label> <p> 
         </p>

        <label> Type Something here </label>
          <input type='text'onChange={(e)=>this.handleChange(e)} 
               value=  {this.state.typedtext}/>

       <button onClick={()=>this.handleClick()}> Copy Text </button>
       </div>
      );
    }
}

Answer 1

出现此问题的原因是，当您在handleClick方法中运行value时，您将状态值用作参数而不是事件对象。它正在尝试获取字符串的constructor(props) { super(props); this.state = { typedtext: 'Nothing' } }; handleClick(e) { this.handleChange(e) } handleChange(e) { this.setState({ typedtext: e.target.value }); } render() { return ( <div> <label> Typed Value is : {this.state.typedtext} </label> <p></p> <label> Type Something here </label> <input type='text'onChange={e => this.handleChange(e)} value={this.state.typedtext}/> <button onClick={e => this.handleClick(e)}> Copy Text </button> </div> ); }属性。

您的代码应如下所示：

handleClick

但是handleChange不会复制文本。它只会删除它，因为constructor(props) { super(props); this.state = { typedtext: 'Nothing' } }; handleChange() { this.setState({ typedtext: this.input.value }); } render() { return ( <div> <label> Typed Value is : {this.state.typedtext} </label> <p></p> <label> Type Something here </label> <input type='text'onChange={() => this.handleChange()} value={this.state.typedtext} ref={input => this.input = input}/> <button onClick={() => this.handleChange()}> Copy Text </button> </div> ); }会尝试获取不包含任何值的button的值。

工作代码如下：

{{1}}

但是您将无法看到按钮的作用，因为在您键入时该按钮已经复制了文本。：）

Answer 2

尝试在构造器上引用此方法将绑定添加到“ 此”：

this.handleChange = this.handleChange.bind(this)

关于构造函数的完整代码：

constructor(props){
    super();
    this.state={
        typedtext: 'Nothing'
    }
    this.handleChange = this.handleChange.bind(this)
};

React.js：TypeError：无法读取未定义的属性'值'

2 个答案: