当我尝试将值绑定到组件函数 handleInput 时出现错误：未捕获的类型错误：无法读取未定义的属性“绑定”

但是，当我将 input 元素插入到 render 方法底部的 return 语句时，它不会产生任何错误。我猜这与 render 方法的生命周期有关，但我不确定。

任何见解表示赞赏。

至于代码的作用，它从 this.props.info.text 中检索一个字符串并将 <= var[0-9] => 的所有实例替换为一个 html 输入框，然后附加到一个 div。在用户输入时，这些值被传播到父组件。

export default class Line extends React.Component {

 constructor() {
   super();
 }

 handleInput(id, e) {
   console.log(id);
   this.props.handleCode(e.target.value);
 }

 shouldComponentUpdate(){
   if (document.getElementById('otherClass').innerHTML.length == 0){
     return true;
   }
   return false;
 }

 render() {
   var id = this.props.id;
   let codeVal = "";
   let codeDiv = document.createElement('div');
   if (typeof(this.props.info) !== 'undefined') {
     //breaks here
     codeVal = this.props.info.text.replace(/<= var[0-9] =>/, '<input type="text" onInput=this.handleInput.bind(this,id)></input>');
     let index = codeVal.indexOf('<');
     let splits = [codeVal.slice(0, index), codeVal.slice(index)];
     codeDiv.innerHTML = "<div class='row'><div class='col-md-6'>"+splits[0]+"</div><div class='col-md-6'>"+splits[1]+ "</div></div>";
     document.getElementById('otherClass').appendChild(codeDiv);
   }

   return(
     <div id='otherClass'></div>
   );

 }
}

父代码：

export default class StateVal extends React.Component {
  handleCode(id, e){
    console.log("value propagated on user input");
    alert(e);
  }
  render() {
    return (
     <div className="col-md-6">
       <div className="card-block">
        < Line info={this.props.data.codeBody[0]} handleCode={this.handleCode} id={1} />
     </div>
   </div>
  );
}
}

编辑：这个想法是，如果我通过像 "int value = <=var0=>" 这样的props检索文本值，我如何将其转换为响应式 html 输入标签，如

 int value = <input type='text' onInput=this.handleInput.bind(this, id)/>

然后在html中呈现它