光标跳出自定义文本字段上的文本字段！怎么解决这个？[材料-界面/文本字段]

Question

伙计们，我使用了Material-UI文本字段，并通过使它成为一个自定义组件来创建一些自定义主题选项。

如下所示：-

const CustomTextField = ({props}) =>{
return (
  <TexField
   label={props.label}
   name={props.label}
   value={props.row[props.label]}
   onChange={(e)=>props.handleChangeFunction(e)}
   />
 )
}

在我的组件中，我注入如下：-

const App = () =>{
    const [value,setValue] = useState('');
//Some methods here
   const handleChange = () =>{
   //Logic here.......
   }

 return(
   <>
    <CustomTextField {...{label:'name',row:emp,handleChangeFun:handleChange}}/> //Custom Comps...
   </>
 ) 
}

所以在每个输入上发生的事情，我的组件呈现，光标从文本字段跳出来，所以为了输入下一个值，我必须再次单击文本字段。

但是当我使用普通的文本字段时，直接在组件中它工作得很好，我理解这是因为onChange事件和在自定义组件中使用文本字段。

在每个值上更改父组件重新呈现。

有没有人能给我一个解决方案？

Answer 1

我不确定你传递道具的方式。这应该起作用：

const CustomTextField = (props) => {
  return (
    <TextField
      label={props.label}
      name={props.label}
      value={props.value}
      onChange={props.onChange}
    />
  );
};

export default function App() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <CustomTextField label="name" value={value} onChange={handleChange} />
    </>
  );
}

可选地，您可以像这样创建组件，而不对道具进行分组：

const CustomTextField = ({label, value, onChange}) => {
  return <TextField label={label} name={label} value={value} onChange={onChange}/>
};