将箭头函数更改为组件列表

IT技术 reactjs
2021-05-21 03:48:28

我想用标签制作和概述 div 并找到了这个答案,这正是我正在寻找的。但是,当我尝试在内部使用某些输入时出现问题OutlinedDiv键入任何字符后,它会失去焦点。我发现问题出在OutlinedDiv以下中使用的箭头函数

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

如果我使用简单div而不是OutlinedDiv一切都按预期工作。那么我可以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);

概述Div.js

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;
1个回答

我已经更新了我之前的答案以使用以下内容进行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;

这避免了在重新渲染时重新安装输入组件。

这是您的沙箱的修改版本:

https://codesandbox.io/s/custom-outlined-component-sv2bi