Question

当我尝试将值绑定到组件函数handleInput时，我收到错误：未捕获的TypeError：无法读取未定义的属性'bind'

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

感谢任何见解。

至于代码的作用，它从this.props.info.text中检索一个字符串，并替换＆lt; = var [0-9] =＆gt;的所有实例。使用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 =＆lt; = var0 =＆gt;”这样的道具检索文本值如何将其转换为响应式html输入标记，如

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

然后在html中呈现它

Answer 1

在从带反应的字符串生成Html时，您只能编写有效的HTML。

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

带反应的HTML

Generating a jsx string是需要babel的特殊情况。

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

Answer 2

有一种正确的方法来呈现带有react的字符串：

使用dangerouslySetInnerHTML在React中将HTML作为字符串注入。主题受到here

的处理

此致

Answer 3

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

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

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

onInput=this.handleInput(id)

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

反应组分中的绑定方法

3 个答案: