如何解决我如何从reactJS另一个模块的文本字段中获取值
我想访问reactjs另一个模块中textField的值。想要访问的模块不会导入整个文本字段,而只需要访问该值。在reactjs的另一个模块中访问value变量的最佳方法是什么?
这是我的功能性textField组件:
export default function textField(props) {
const [value,setValue] = React.useState("");
const handleChange = (event) => {
setValue(value);
};
return (
<div>
<TextField
id="outlined-multiline-static"
label="Frage"
multiline
onClick={handleClickOpen}
rows={4}
value={value}
placeholder="hello"
variant="outlined"
style={{
backgroundColor: "white",}}
/>
</div>
);
}
解决方法
这里想到的最可能的选择是lifting state的概念,在该概念中,最接近的祖先组件通过某种方式还可以跟踪状态,并将其传递给需要的同级跟踪它。您可以通过允许在每次更改时调用一个onChangeCallback
属性来将此功能作为模块的可选功能。然后可以通过一个setSharedState
钩子来传递此道具,该钩子将在祖先上设置状态:
const ParentComponent = () => {
const [textfieldVal,setTextfieldVal] = useState();
return (
<TextField onChangeCallback={setTextFieldVal} />
);
}
然后将模块更新为:
export default function textField(props) {
const [value,setValue] = React.useState("");
const {onChangeCallback} = props;
const handleChange = (event) => {
setValue(value);
if (typeof onChangeCallback === 'function') {
onChangeCallback(event); // or value,I'm not sure which you should be using here,this might be incorrect
}
};
return (
<div>
<TextField
id="outlined-multiline-static"
label="Frage"
multiline
onClick={handleClickOpen}
rows={4}
value={value}
placeholder="hello"
variant="outlined"
style={{
backgroundColor: "white",}}
/>
</div>
);
}
这只是一个粗糙的例子。用于自由传递状态的其他选项将使用Redux或the Context API,但是前者在这种情况下可能会过大,而后者可能不太适合特定的一次性数据点。 / p>
,每当textField的值更改时,您都可以发送onTextFieldChange函数作为道具,您可以将值传递给onTextFieldChange函数,并且可以在父组件中使用它。
还有另一种方法,Redux
您应该尝试将redux用于不直接相关的组件(即同级组件或层次结构较长)之间的共享状态。 For small applications,redux is overkilled so should be avoided.
有可能选项,但适当的选项作为道具
const modle1= () => {
const [textfieldVal,setTextfieldVal] = useState();
return (
<TextField onChangeCallback={setTextFieldVal} />
);
}
export default function textField(props) {
const [value,}}
/>
</div>
);
}
或者您可以使用create context和use context并提供要提供的父项,而将子项作为消费者,但是最好的选择作为道具
,我建议您使用react的父子特性来处理此问题。由于我不确定其他模块与该模块之间的关系,因此我将提供一个粗略的框架。
在父组件中:
export default function ParentComponent(){
const [status,updateStatus] = useState("")
return(
<TextView updateParent={updateStatus}>
</TextView>
)
}
然后在您的子组件中:
const handleChange = (event) => {
setValue(value);
props.updateParent(value);
};
如果它们是兄弟姐妹,我将使用父组件,然后将状态传递给兄弟姐妹。否则,请视情况使用此父子关系来传递和更新状态。
HTH
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。