Question

我正在构建时间表应用程序。 index.js文件是呈现健康表的文件。呈现的表由HeaderRow和TableRow组件组成。 HeaderRow是父组件。 TableRow是在HeaderRow中渲染的子组件。下面粘贴的代码有效。但是我无法找到一种方法来捕获输入到TableRow组件中的数据。

我尝试了这件事： -在TableRow的标签中放置一个onchange事件处理程序以捕获事件并将其通过props传递给index.js文件，以便修改index.js中的状态并触发渲染。这不起作用。

我找到了一篇有关如何构建数据表的有用文章，但是这种方法与我的方法完全不同-https://www.taniarascia.com/content-editable-elements-in-javascript-react/

如果没有任何效果，我可能不得不采用本文建议的方法。

index.js
import React from "react";
import ReactDOM from "react-dom";
import HeaderRow from "./headerrow";
import TableRow from "./tablerow";
import "./styles.css";

class App extends React.Component {
constructor(props) {
super(props);
this.state = { noOfRows: [], event: null };
this.addRow = this.addRow.bind(this);
this.deleteRow = this.deleteRow.bind(this);
this.change = this.change.bind(this);
}
change(e) {
this.setState({ event: e.target.tdi });
console.log(this.state);
}
addRow() {
let arr = [...this.state.noOfRows];
if (arr.length === 0) {
arr.push(1);
} else {
let arrLastItem = arr[arr.length - 1];
arr.push(arrLastItem + 1);
}

this.setState({
noOfRows: arr
});
console.log(arr);
}

deleteRow(event) {
let arr = [...this.state.noOfRows];
let id = event.target.parentNode.id;
let ix = parseInt(id, 10);
let iz = arr.indexOf(ix);
arr.splice(iz, 1);
this.setState({ noOfRows: arr });
}
render() {
let children = [];
for (let i = 0; i < this.state.noOfRows.length; i++) {
children.push(
<TableRow
id={this.state.noOfRows[i]}
delete={this.deleteRow}
change={this.change}
/>
);
}
return <HeaderRow click={this.addRow}>{children}</HeaderRow>;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


headerrow.js
import React from "react";

import "./styles.css"; 

export default function HeaderRow(props) {
function handler() {
props.click();
}

return (
<table>
<tr>
<th>Feature</th>
<th>Phase</th>
<th>Comments</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
<th onClick={handler}>+</th>
</tr>

{props.children}
</table>
);
}

tablerow.js
import React from "react";
import "./styles.css";
export default function TableRow(props) {
function del(e) {
props.delete(e);
}
function change(e) {
props.change(e);
}
return (
<tr id={props.id}>
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td tdi={props.id} onChange={change} contentEditable="true" />
<td onClick={del}>-</td>
</tr>
);
}

Answer 1

您可以使用onKeyUp和e.target.textContent

实现此目的

在应用中

  change(e) {
    this.setState({ event: e.target.textContent });
    console.log(this.state);
  }

在tablerow.js中

export default function TableRow(props) {
  function del(e) {
    props.delete(e);
  }
  function change(e) {
    props.change(e);
  }
  return (
      <tr id={props.id}>
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td tdi={props.id} onKeyUp={change} contentEditable="true" />
        <td onClick={del}>-</td>
      </tr>
    );
}

注意：现在可以获取您在当前单元格中输入的数据。不知道这里有什么要求。基于此，您可以更新状态。

如何捕获输入到表行组件中的数据

1 个答案: