react组件中的绑定方法 [英] Binding methods in react components

问题描述

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

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

感谢任何见解.

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

export default class Line extends React.Component {构造函数(){极好的();}句柄输入(id，e){控制台日志(ID)；this.props.handleCode(e.target.value);}应该组件更新(){if (document.getElementById('otherClass').innerHTML.length == 0){返回真；}返回假；}使成为() {var id = this.props.id;让 codeVal = "";让 codeDiv = document.createElement('div');如果(typeof(this.props.info)！=='未定义'){//这里中断codeVal = this.props.info.text.replace(/<= var[0-9] =>/, '<input type="text" onInput=this.handleInput.bind(this,id)>');让 index = codeVal.indexOf('<');让 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);}返回(<div id='otherClass'></div>);}}

父代码:

导出默认类 StateVal extends React.Component {句柄代码(id，e){console.log("在用户输入上传播的值");警报(e)；}使成为() {返回 (<div className="col-md-6"><div className="卡片块"><行信息=​​{this.props.data.codeBody[0]} handleCode={this.handleCode} id={1}/>

);}}

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

 int value = 

然后在html中渲染它

解决方案

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

<input type='text' onInput=this.handleInput.bind(this, id)/> 无效:onInput 不是 HTML 有效道具

生成一个 jsx 字符串到 HTMLreact 是一种特殊情况，需要 babel.

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

I'm getting an error when I try to bind values to the component function handleInput: Uncaught TypeError: Cannot read property 'bind' of undefined

However, when I insert the input element into the return statement at the bottom of the render method, it doesn't produce any errors. I'm guessing that this has something to do with the lifecycle of the render method, but I'm not sure.

Any insight is appreciated.

As for what the code does, it retrieves a string from this.props.info.text and replaces all instances of <= var[0-9] => with an html input box, then appends to a div. On user input, the values are propagated to a parent component.

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>
   );

 }
}

Parent code:

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>
  );
}
}

Edit: the idea is that if I retrieve a text value through props like "int value = <=var0=>" how can I convert it to a responsive html input tag like

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

and then render it in html

解决方案

You can only write valid HTML when generating Html from a string with react.

<input type='text' onInput=this.handleInput.bind(this, id)/> is not valid: onInput is not a HTML valid props

Generating a jsx string to HTML with react is a special case requiring babel.

I don't think you'll be able to insert jsx string in a component on the fly using a string but there is may be another solution. Split your string into an array and replace matching string by not a string code "<../>" but by a jsx element <...>. This jsx element will have the function binding as wanted to your component. I found a similar solution here: Replace part of string with tag in JSX

这篇关于react组件中的绑定方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！