antd table input 失焦的问题

blueju 等级 567 0 0
标签: tableinputhttps

背景

隔壁 zym 同事遇到了一个问题,在编辑表格时,每输入一个字符后都会失去焦点,需要重新点击聚焦后才能继续输入,如图:
antd table input 失焦的问题

原因

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

import "./styles.css";
import React from "react";
import { Table, Input } from "antd";
import "antd/dist/antd.css";

export default class App extends React.Component {
  state = {
    tableInput: "",
    dataSource: [
      {
        name: "blueju",
        password: "blueju",
        type: 1
      }
    ]
  };

  handleInputChange = (e, text, index) => {
    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
    dataSource[index].name = e.target.value;
    this.setState({
      dataSource
    });
  };

  render() {
    const components = {
      table(props) {
        return <table>{props.children}</table>;
      }
    };
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Table dataSource={this.state.dataSource} components={components}>
          <Table.Column
            dataIndex="name"
            title="name"
            render={(text, record, index) => {
              if (record.type === 1) {
                return (
                  <Input
                    // key={index}
                    value={this.state.tableInput}
                    onChange={(e) => {
                      // this.handleInputChange(e, text, index);
                      this.setState({
                        tableInput: e.target.value
                      });
                    }}
                  />
                );
              }
              if (record.type === 2) {
                return text;
              }
            }}
          />
        </Table>
        <Input.TextArea
          value={JSON.stringify(this.state.dataSource, null, 2)}
          autoSize
        />
      </div>
    );
  }
}

修改后:

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

import "./styles.css";
import React from "react";
import { Table, Input } from "antd";
import "antd/dist/antd.css";

const components = {
  table(props) {
    return <table>{props.children}</table>;
  }
};

export default class App extends React.Component {
  state = {
    tableInput: "",
    dataSource: [
      {
        name: "blueju",
        password: "blueju",
        type: 1
      }
    ]
  };

  handleInputChange = (e, text, index) => {
    const dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
    dataSource[index].name = e.target.value;
    this.setState({
      dataSource
    });
  };

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Table dataSource={this.state.dataSource} components={components}>
          <Table.Column
            dataIndex="name"
            title="name"
            render={(text, record, index) => {
              if (record.type === 1) {
                return (
                  <Input
                    // key={index}
                    value={this.state.tableInput}
                    onChange={(e) => {
                      // this.handleInputChange(e, text, index);
                      this.setState({
                        tableInput: e.target.value
                      });
                    }}
                  />
                );
              }
              if (record.type === 2) {
                return text;
              }
            }}
          />
        </Table>
        <Input.TextArea
          value={JSON.stringify(this.state.dataSource, null, 2)}
          autoSize
        />
      </div>
    );
  }
}

修改后效果图:
antd table input 失焦的问题

Github

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

收藏
评论区

相关推荐

解决ios软键盘收回时屏幕空白问题
添加事件:window.scrollTo(x,y) 在input的释焦事件中添加blur事件, 参数X要在窗口文档显示区左上角显示的文档的 x 坐标。 参数y要在窗口文档显示区左上角显示的文档的 y 坐标。 添加jQuery插件 mounted(){ //解决ios 软键盘弹出屏幕空白 $("input,select,te
html5的input类型(type)和所有属性详解
先总结input的所有属性 required:标记一个字段是否为必须。如果一个字段被标记为required "required"(严格模式下),或者required(宽松模式下)并且这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。什么是无效值?看pattern属性 pattern:该属性包含了一个JavaScript风格的正则表达式,输
input 获取焦点,键盘遮挡页面
移动端开发中常遇到的就是键盘遮挡问题,下面提供项目中的写法: window.addEventListener('resize', () { const activeElement document.activeElement; if (activeElement.tagName 'INPUT' || activeElement.t
正则表达式限制输入框只能输入数字
1 正则表达式限制输入框只能输入数字 <input type"text" onkeyup"this.valuethis.value.replace(/^d/g,') " onafterpaste"this.valuethis.value.replace(/^d/g,')" name"f_order" value"1"/ 其
mysql表和字段的操作
(3)mysql表和字段的操作 (3)mysql表和字段的操作 创建表 create table name( id int, student varchar(20) ); 查看表结构 常用 describe 表名; 修改表名 老表 rename 新表 ALTER TABLE tb\_men
基本语法
1创建数据库 create database databasename 2删除数据库 drop database dbname 3创建表 create table tablename (id number, name varchar, sex varchar, age number) 4删除表 drop table table
vue--封装后台管理项目通用组件
先看一下我的项目的页面构成 几乎每个页面都是上下结构,上边是筛选条件区域,下边则是表格和分页这里我定义了两个组件:myFilter和myTablemyFilter组件该组件由五部分构成:input输入框、select下拉框、查询按钮、新增按钮、slot五部分构成,它们都是可选的input(通过vif标识可选;由inputName指定标题和默认文本
Vue组件(30)封装一下数据列表的控件
UI库的 table好像前端喜欢叫 table,而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义,UI库的table也是有其他的功能的。而数据列表控件其实也没啥好封装的,各种功能UI库都提供了,一般使用也是很方便的,只是为了我的那种想法还是需要小小的封装一下。功能 锁定行列(UI库自带) 多选(整理)
mysql 修改表或表结构常用sql语句
批量修改表名的sql语句alter table old_name rename new_name; 修改表名alter table test add column add_name varchar(10); 添加表列alter table test drop column del_name; 删除表列alter table test m
antd table input 失焦的问题
<a name"UYeEu"</a 背景隔壁 zym 同事遇到了一个问题,在编辑表格时,每输入一个字符后都会失去焦点,需要重新点击聚焦后才能继续输入,如图:<br /<br /​<br /<a name"xKS8Z"</a 原因归根结底,是关于 key 的问题。<br /原先的代码中,components 在 render 中,然而在每次 setState
高考后即将分道扬镳,悄悄用python记录下三年情谊的“同学录”
又到了一年的毕业季, 今天就高考的最后一天了,记得当年中小学快毕业时,班上的同学都在相互交换写同学录,一本小小的同学录,装载着都是青春的回忆,或幼稚或成熟的字体,或长或短的语句,或认真或戏虐的毕业留言,让你瞬间回忆起快淡忘的那些人,那些事。毕业在即,我教你用python制作一份独一无二的同学录,留给未来回味,不给青春留遗憾。本文使用的逻辑是利用字典来保存学生
Qt简单使用表格
接在Qt简单登录后https://www.helloworld.net/p/4enJFnZUQAC8G 添加新文件 使用的组件table weight和 table view头文件c++ifndef MANAGEMENTHdefine MANAGEMENTHinclude <QWidgetinclude <QMouseEventnamespace Ui cl
Python中的sqlit数据库,统计某个表中的所有行数的方法
conn.execute('''CREATE TABLE IF NOT EXISTS ADDRESSDB(MacAddress CHAR(50),NewAddress CHAR(50) );''') cursor conn.cursor() ccursor.execute('''SELECT FROM ADDRESSDB''
input placeholder信息输入效果
可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果,咋眼一看好像很简单,但是一些又说不上具体细节,如下图一眼一看,这不动态改变 placeholder 的值就好了吗?仔细看人家还有一个类似光标的东西呢,其实也简单,在拼接的时候再拼接个 | 不就好了吗?代码如下:javascriptconst input document.getElementByI
盘点JavaScript focus/blur(聚焦)实际应用
大家好,我进阶学习者。一、前言当用户点击某个元素或使用键盘上的 Tab 键选中时,该元素将会获得聚焦(focus)。当网页加载时,HTML特性(attribute)。autofocus也可以让一个焦点落在元素上,不仅如此,还有其它途径可以获得焦点。 二、focus/blur 事件当元素聚焦时,会触发 focus事件,当元素失去焦点时,会触发 blur事件。