我想用标签制作和概述 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;