Question

React v15

我试图制作没有桌面标签的桌子。在此表中，我想单击一行并将该行转换为在该特定行中包含输入字段的表单，其中一个是组件，其他是简单的输入标记。

我可以用vanilla JS innerHTML来做，但我不想这样做，因为＆＃34; Dangerously Set innerHTML＆＃34; ReactJS link

有没有办法在做出反应？

这是我的代码，其中包含一个不起作用的示例Link to CodeSandbox。很抱歉没有使用内部代码编辑器，因为我更喜欢codeandbox中的编码风格。

Answer 1

您的代码有两个主要问题：

render的{{1}}函数未返回任何内容改变这个：
```
App
```
对此（不要忘记在构造函数中绑定render() { return data.map(row => { if (this.state.show) { <DataOutput row={row} onclick={this.handleClick} />; } else { <InputData row={row} />; } }); }并为每个组件添加handleClick属性，因为我们iterating over an array）：
```
key
```
在render() { return data.map((row,index) => { if (this.state.show) { return <DataOutput key={index} row={row} onclick={this.handleClick} />; } else { return <InputData key={index} row={row} />; } }); }内，您没有使用DataOutput道具传入：
改变这个：
```
onclick
```
对此：
```
const DataOutput = props =>
  <div>
    <i className='date' style={styles}>{props.row.date}</i>
    <i className='animal' style={styles}>{props.row.animal}</i>
    <i className='name' style={styles}>{props.row.name}</i>
  </div>  
```

注意您使用的是小写const DataOutput = props => <div onClick={props.onclick}> <i className='date' style={styles}>{props.row.date}</i> <i className='animal' style={styles}>{props.row.animal}</i> <i className='name' style={styles}>{props.row.name}</i> </div>而不是驼峰式onclick。

修改：
作为评论的后续内容：

我从Datepicker收到错误，这不是反应错误，但是   仍然无法获得最终结果！错误是：date.clone不是   功能

这是因为onClick期望一个moment对象（它使用其react-datePicker方法）。您没有将其包含在解决方案中，并且您没有传递clone对象，而是将简单字符串作为moment传递。

看起来应该是这样的：

date

编辑＃2
作为您的其他评论的后续内容：


我在每一行都得到表单元素，当我只想要那行时   我点击了。有办法吗？

你需要跟踪被点击的行，你可以使用一个对象作为一个简单的查找表，也许每一行都会得到一个this.state = {startDate: moment(this.props.row.date, "DD/MM/YYYY")}，这将是查找中的id表格和值将为key或true（点击与否）。

我认为现在是时候考虑创建另一个负责如何渲染行的组件false，它会期望Row布尔值并将呈现{{分别为1}}或isEditable 它还会期望InputData作为道具和DataOutput处理程序，它会将被点击的相关rowId传递给父级。这样，父级可以将此rowId存储在查找表中（onClick内）并重新呈现表格，但这次rowId将是＆＃34;可编辑的＆＃34 ;

state组件：

Row

Row的新代码：

class Row extends React.Component { onClick = () => { const { handleClick, rowId } = this.props; handleClick(rowId); }; render() { const { isEditable, row } = this.props; const ComponentToRender = isEditable ? ( <InputData row={row} /> ) : ( <DataOutput row={row} onclick={this.onClick} /> ); return ComponentToRender; } }

用反应组件替换表中的单击行

1 个答案: