Question

我试图在单击另一个单元格中的图标后使表格单元格可编辑，因为我需要获取元素的索引，以便编辑器将在正确的行中打开，该图标属于该行。我的问题是我不知道我应该得到表DOM元素的prop值的方法是clearify的代码

生成的dom树的一部分：

<tbody>
{stepsDone.map(function(step,idx) {

    let content = step;
    const editing = this.state.editing;

    if(editing){
        content = (
            <form onSubmit={this._save}>
              <input type="text" defaultValue={step} />
            </form>
          );
    }
    return(
            <tr key={idx}>
                <td className="step" data-step={'step'+idx}>{content}</td>
                <td className="icRow">
                        <Icon className="edit" onClick={this._showEditor} rownum={idx}/>
                        <Icon className="remove"/>
                        <Icon className="trash outline"/>
                </td>
            </tr>   
    )      
},this)}

显示编辑器功能：

_showEditor(e){
        this.setState({
                        editing:{
                            row:e.target.rownum
                        }
                    });
        console.log(this.state.editing);
    }

执行showtior功能控制台日志后：首先点击= null ，这是正常的更多点击= 未定义，这就是我想从地图功能接收idx的麻烦。

这是来自Icon.js的代码

import React from 'react';
import classNames from 'classnames';

export function Icon(props) {
   const cssclasses = classNames('icon', props.className);
   return <i className={cssclasses} onClick={props.onClick}/>;
}

Answer 1

如果你想从map函数中获取idx，你应该将它传递给函数_showEditor，所以你的代码必须是这样的：

<Icon className="edit" onClick={this._showEditor(idx)}/>

，函数定义应为：

_showEditor = (idx) => (event) => {
   this.setState({
        editing:{
                  row:idx
                        }
                    });
        console.log(this.state.editing);
}

或者如果您因某些原因不想使用箭头功能，只需替换

即可

onClick={this._showEditor(idx)}

与

onClick={this._showEditor.bind(this,idx)}

，其定义变为

_showEditor(idx){...}

react.js如何获得prop form tree元素

1 个答案: