javascript - 将 React 组件构造函数作为属性传递给另一个组件时管理状态

Question

我正在尝试将 React 组件构造函数传递给另一个组件，该组件应该有一个 setState 事件处理程序。我应该如何将“this”绑定(bind)到处理程序？

这是 App 组件，它具有数据作为状态，如下所示:

const App = function(props, context) {
    this.props = props;
    this.context = context;
};

App.prototype = Object.create(React.Component.prototype);
App.prototype.state = {
    datum: [
        {
            isTicked: true,
            otherData: "otherData_1"
            /* Other data inside object */
        },
        {
            isTicked: false,
            otherData: "otherData_2"
            /* Other data inside object */
        },
        {
            isTicked: true,
            otherData: "otherData_3"
            /* Other data inside object */
        }
    ]
};

这里是 Table 组件，它根据 props.row 上的回调构建组件。像这样:

索引.js:

// index.js
const Table = require("./table.js");

表.js:

// table.js
module.exports = (props, context) => (
    <table>
        <thead>
            <tr>{Object.keys(props.row).map(k => <th>{k}</th>)}</tr>
        </thead>
        <tbody>
            {props.datum.map((obj, index) => (
                <tr>
                    {Object.keys(props.row).map(k => (
                        <td>
                            {props.row[k] instanceof Function
                                ? props.row[k](obj, index)
                                : props.row[k]}
                        </td>
                    ))}
                </tr>
            ))}
        </tbody>
    </table>
);

我传下去props.row像这样:

App.prototype.tableRow = {
    T: (data, index) => (
        <input
            type="checkbox"
            checked={data.isTicked}
            onChange={e => {
                this.setState(prevState => {
                    prevState.datum[index].isTicked = !prevState.datum[index]
                        .isTicked;
                    return {
                        datum: prevState.datum
                    };
                });
            }}
        />
    ),
    otherData: data => data.otherData
};

App.prototype.render = function() {
    return <Table datum={this.state.datum} row={this.tableRow} />;
};

这里的问题是当我通过 props.row一个回调函数，它构造一个应该调用 this.setState 的 React 元素在 onClick 上事件，我无法绑定(bind) this作为通常的事件处理函数。

这是我的 CodeSandBox 示例，它显示了这种情况: https://codesandbox.io/s/jjlvvwjvpv你可以看到，如果你点击它发出信号的复选框，undefined is not an object (evaluating 'undefined.setState') ，表示此计算结果为未定义。

我该如何处理 this ？

Answer 1

也许您可以通过将 App.prototype.tableRow 对象修改为以下内容来解决此问题:

App.prototype.tableRow = {
  T: function(data, index) {  /* <--- Use regular function here, rather than arrow function */

    return <input
      type="checkbox"
      checked={data.isTicked}
      onChange={e => {

        this.setState(prevState => {
          prevState.datum[index].isTicked = !prevState.datum[index].isTicked;
          return {
            datum: prevState.datum
          };
        });
      }}
    />
  },
  otherData: data => data.otherData
};

然后，像这样更新你的渲染函数:

App.prototype.render = function() {

  /* Clone the tableRow object from prototype, and bind T function to this instance */
  const tableRow = { ...this.tableRow };  
  tableRow.T = tableRow.T.bind(this);

  return <Table datum={this.state.datum} row={tableRow} />;
};

这是 a working demo on codesandbox - 希望这对您有所帮助!