React 组件中的绑定方法

Question

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

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

感谢任何见解。

至于代码的作用，它从 this.props.info.text 中检索一个字符串，并将 的所有实例替换为一个 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 = ”之类的道具检索文本值，我如何将其转换为响应式html输入标签，例如

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

然后在html中渲染

Answer 1

使用 react 从字符串生成 Html 时，您只能编写有效的 HTML。

<input type='text' onInput=this.handleInput.bind(this, id)/> 无效：onInput 不是 HTML valid props

Generating a jsx string 到 HTML 与 react 是需要babel 的特殊情况。

我认为您不能使用字符串即时在组件中插入 jsx 字符串，但可能还有另一种解决方案。将您的字符串拆分为一个数组，并用不是字符串代码"<../>" 而是用jsx 元素<...> 替换匹配的字符串。此 jsx 元素将根据需要将函数绑定到您的组件。我在这里找到了类似的解决方案：Replace part of string with tag in JSX

Answer 2

有一种正确的方法可以用 react 渲染字符串：

在 React 中使用 dangerouslySetInnerHTML 将 HTML 作为字符串注入。主题被处理here

问候

Answer 3

您可以像下面那样在末尾设置绑定关键字，而不是您给出的示例。

onInput=this.handleInput(id).bind(this)

或者只是在这里调用这个方法并在构造函数级别绑定它。

onInput=this.handleInput(id)

constructor() {
   super();
   this.handleInput=this.handleInput.bind(this);
 }