Reactjs 将箭头功能更改为组件列表

我想制作和概述div的标签，并找到答案，这正是我所寻找的。但是，当我尝试在

OutlinedDiv

中使用一些输入时，出现了一个问题。键入任何字符后，它都会失去焦点。我发现问题在于

OutlinedDiv

中使用的箭头函数：

inputComponent: ({ className }) => (
      <div key="divKey" className={className}>{children}</div>)

outlinedDiv.js

import React from "react";
import ReactDOM from "react-dom";

import OutlinedDiv from "./OutlinedDiv";
import TextField from "@material-ui/core/TextField";

function App() {
  const [state, setState] = React.useState({ inputValue: "", inputValue2: "" });

  function handleChange(event) {
    setState({ ...state, [event.target.name]: event.target.value });
  }

  return (
    <div className="App">
      <OutlinedDiv key="outlinedDivKey" label="OutlinedDivTest">
        <div>
          <TextField
            id="inputValue"
            key="inputValueKey"
            name="inputValue"
            label="Some input"
            inputProps={{ style: { textAlign: "right" } }}
            value={state.inputValue}
            onChange={event => handleChange(event)}
          />
        </div>
        <div>
          <TextField
            id="inputValue2"
            key="inputValueKey2"
            name="inputValue2"
            label="Some input2"
            inputProps={{ style: { textAlign: "right" } }}
            value={state.inputValue2}
            onChange={event => handleChange(event)}
          />
        </div>
      </OutlinedDiv>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";

import TextField from "@material-ui/core/TextField";

const OutlinedDiv = ({ children, label }) => {
  return (
    <TextField
      variant="outlined"
      label={label}
      multiline
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputComponent: ({ className }) => (
          <div key="divKey" className={className}>
            {children}
          </div>
        )
      }}
    />
  );
};
export default OutlinedDiv;

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
常量OutlinedDiv=（{子项，标签}）=>{
返回(
(
{儿童}
)
}}
/>
);
};
导出默认OutlinedDiv；

我更新了以前的答案，将以下内容用于

OutlinedDiv

实现：

import React from "react";

import TextField from "@material-ui/core/TextField";

const InputComponent = ({ inputRef, ...other }) => <div {...other} />;
const OutlinedDiv = ({ children, label }) => {
  return (
    <TextField
      variant="outlined"
      label={label}
      multiline
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputComponent: InputComponent
      }}
      inputProps={{ children: children }}
    />
  );
};
export default OutlinedDiv;

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
常量InputComponent=（{inputRef，…other}）=>；
常量OutlinedDiv=（{子项，标签}）=>{
返回(
);
};
导出默认OutlinedDiv；

这样可以避免在重新渲染时重新装载输入组件

以下是您的沙盒的修改版本：

---

我的最佳建议是基于TextField的“概述”CSS编写自己的“OutlinedDiv”组件，而不使用TextField。发生此问题是因为将一个文本字段放入另一个文本字段。这是一个非常糟糕的做法。我的例子太简单了。我想用它作为几个组件的容器，比如说两个输入和一个选择，给它们一个标签来描述它们负责什么。我更新了我的代码沙盒。非常感谢。显示一条警告，提示将

inputRef

传递到

input

。我找到了解释和解决方案，并更改了

InputComponent

的声明：

constinputcomponent=props=>{let{inputRef，…others}=props；return}@EganWolf接得好--我没注意控制台。我已经相应地更新了我的答案。