React循环出来的input改变值以后如果自定义光标？

Question

先上代码

import React, { PureComponent } from "react";

 
class Test extends PureComponent {
  render() {
    const data = [
      { title: "aaa", value: "ddddddddd1" },
      { title: "bbb", value: "fffffff2" },
      { title: "ccc", value: "zzzzzzzzzzz3" },
      { title: "ddd", value: "ddddddddd4" },
      { title: "eee", value: "qqqqqqqqq5" }
    ];
    return (
      <div> 
        {data.map((item, index) => (
          <div key={index}> 
            {item.title} 
            <input 
              key={index} 
              value={item.value} 
              onChange={e => {
                console.log(e.target.value);
              }} 
            /> 
          </div> 
        ))} 
      </div> 
    );
  }
}

 
export default Test;

修改input的内容后，会导致光标跳到最后面。

如何修改代码可以保证修改内容后光标不变？

另外，也想问下这个到底是什么原因导致的？ 如果不用受控组件，就不会有这个问题，但是检测不到修改.

Answer 1

你的例子里，光标被移动到最后的原因是你并没修改 input 的值，所以当你增删某个字符后，onChange 只是打印了一下即将要变成的结果，相当于 input 刚被增删了一个字符，然后又瞬间被改回原始值了。就这么增删 =》reset 的操作，就把光标弄到最后面了。

import React, { useState } from "react";

function Test() {
  const [data, setData] = useState([
    { title: "aaa", value: "ddddddddd1" },
    { title: "bbb", value: "fffffff2" },
    { title: "ccc", value: "zzzzzzzzzzz3" },
    { title: "ddd", value: "ddddddddd4" },
    { title: "eee", value: "qqqqqqqqq5" }
  ]);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          {item.title}
          <input
            key={index}
            value={item.value}
            onChange={(e) => {
              setData(
                data.map((item, i) => {
                  if (i === index) {
                    return { ...item, value: e.target.value };
                  }
                  return item;
                })
              );
            }}
          />
        </div>
      ))}
    </div>
  );
}

export default Test;

codesandbox 示例

Answer 2

改成非受控，onChange中处理新值

<input 
  defaultValue={item.value} 
  onChange={e => {
    // 更改值
  }} 
/>