问一个 react reusable 组件的的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2001 天前的主题，其中的信息可能已经有所发展或是发生改变。


import React, { Fragment} from 'react';

const App = () => {

  return (
    <div>
      <h1>My App</h1>

      <InputWithLabel
        id="search"
        label="Search"
        value={"1"}
      />
      <InputWithLabel
        id="search2"
        label="Search2"
        value={"2"}
      />
      <hr />
    </div>
  );
};

const InputWithLabel = ({
  id,
  label,
  value,
  type = 'text',
  onInputChange,
}) => (
    <Fragment>
      <label htmlFor={id}>{label}</label>

      <input
        id={id}
        type={type}
        value={value}
        onChange={onInputChange}
        autoFocus
      />
    </Fragment>
  );

export default App;

当我在 App 中 render 两个该组件时,发现 autoFocus 只有最后一个组件接收到了。为什么？？？

5 条回复