<a name="UYeEu"></a>

背景

隔壁 zym 同事遇到了一个问题，在编辑表格时，每输入一个字符后都会失去焦点，需要重新点击聚焦后才能继续输入，如图：<br /><br />​<br /> <a name="xKS8Z"></a>

原因

归根结底，是关于 key 的问题。<br />原先的代码中，components 在 render 中，然而在每次 setState 后都会触发 render，因此相当于每次 components 都是一个新变量、新组件。

1import "./styles.css";
2import React from "react";
3import { Table, Input } from "antd";
4import "antd/dist/antd.css";
5
6export default class App extends React.Component {
7  state = {
8    tableInput: "",
9    dataSource: [
10      {
11        name: "blueju",
12        password: "blueju",
13        type: 1
14      }
15    ]
16  };
17
18  handleInputChange = (e, text, index) => {
19    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
20    dataSource[index].name = e.target.value;
21    this.setState({
22      dataSource
23    });
24  };
25
26  render() {
27    const components = {
28      table(props) {
29        return <table>{props.children}</table>;
30      }
31    };
32    return (
33      <div className="App">
34        <h1>Hello CodeSandbox</h1>
35        <h2>Start editing to see some magic happen!</h2>
36        <Table dataSource={this.state.dataSource} components={components}>
37          <Table.Column
38            dataIndex="name"
39            title="name"
40            render={(text, record, index) => {
41              if (record.type === 1) {
42                return (
43                  <Input
44                    // key={index}
45                    value={this.state.tableInput}
46                    onChange={(e) => {
47                      // this.handleInputChange(e, text, index);
48                      this.setState({
49                        tableInput: e.target.value
50                      });
51                    }}
52                  />
53                );
54              }
55              if (record.type === 2) {
56                return text;
57              }
58            }}
59          />
60        </Table>
61        <Input.TextArea
62          value={JSON.stringify(this.state.dataSource, null, 2)}
63          autoSize
64        />
65      </div>
66    );
67  }
68}

修改后：

将 components 提到组件外，当然如果不需要被其他组件共享，你也可以提到组件内部。

1import "./styles.css";
2import React from "react";
3import { Table, Input } from "antd";
4import "antd/dist/antd.css";
5
6const components = {
7  table(props) {
8    return <table>{props.children}</table>;
9  }
10};
11
12export default class App extends React.Component {
13  state = {
14    tableInput: "",
15    dataSource: [
16      {
17        name: "blueju",
18        password: "blueju",
19        type: 1
20      }
21    ]
22  };
23
24  handleInputChange = (e, text, index) => {
25    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
26    dataSource[index].name = e.target.value;
27    this.setState({
28      dataSource
29    });
30  };
31
32  render() {
33    return (
34      <div className="App">
35        <h1>Hello CodeSandbox</h1>
36        <h2>Start editing to see some magic happen!</h2>
37        <Table dataSource={this.state.dataSource} components={components}>
38          <Table.Column
39            dataIndex="name"
40            title="name"
41            render={(text, record, index) => {
42              if (record.type === 1) {
43                return (
44                  <Input
45                    // key={index}
46                    value={this.state.tableInput}
47                    onChange={(e) => {
48                      // this.handleInputChange(e, text, index);
49                      this.setState({
50                        tableInput: e.target.value
51                      });
52                    }}
53                  />
54                );
55              }
56              if (record.type === 2) {
57                return text;
58              }
59            }}
60          />
61        </Table>
62        <Input.TextArea
63          value={JSON.stringify(this.state.dataSource, null, 2)}
64          autoSize
65        />
66      </div>
67    );
68  }
69}
70

修改后效果图：<br /><br />

<a name="QkEUe"></a>

Github

https://github.com/blueju/BlogCodeSandBox/tree/master/input-onblur-in-antd-table