我有一个HealthForm组件，用户可以在其中输入文本输入中的URL，然后单击按钮提交。我将该网址另存为组件中的状态，并调用了一些都正常工作的API。问题是我还有其他几个需要该url的组件，而我似乎找不到找到将其传递给他们的方法。
我的App.js看起来像这样，这就是所有其他帖子/教程都让我感到困惑的原因。
class App extends React.Component {
render(){
return(
<MuiThemeProvider>
<Router>
<div className="App">
<Route path="/" component={()=>(
<div>
<Header/>
<HealthForm/>
</div>)}/>
<Route path="/path1" component={ProductForm}></Route>
<Route path="/path2" component={xForm}></Route>
<Route path="/path3" component={yForm}></Route>
<Route path="/path4" component={zForm}></Route>
</div>
</Router>
</MuiThemeProvider>
);
}
}
健康表格
class HealthForm extends React.Component {
constructor(props) {
super(props);
this.state = {
jarvisURL: '',
jarvisURLError: '',
status: '',
showStatus: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
validate = () => {
//…checks for input errors
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
handleSubmit(event) {
event.preventDefault();
const err = this.validate();
let that = this;
if (!err) {
this.setState({
jarvisURLError: ''
});
console.log(this.state);
var data = this.state.jarvisURL
//… a fetch API call
}
}
render() {
return (
<form>
<TextField
...
/>
<br/>
<Button variant="contained" size="small" color="primary" onClick={e => this.handleSubmit(e)} >
Check
</Button>
<br /> <br />
...
</form>
);
}
}
export default HealthForm;
编辑决定接受格里姆的建议
但是，传奇故事在这里继续存在另一个问题：刷新页面
因此，有两种方法可以做到这一点。推荐的方法是Context API或Redux。但是，有时在企业环境中不能使用它（我曾在Redux用作API缓存而不用于存储应用程序内的数据集的地方）。尽管不是最佳实践，但另一个解决方案是事件冒泡。
通过事件冒泡，您可以将函数作为属性传递给子组件，然后将其冒泡到父组件。这是针对多个组件（例如，您在其中传递onClick侦听器的MaterialUI Button）完成的。使用您的handleClick函数，您将获得以下内容：
handleSubmit(event) {
event.preventDefault();
const err = this.validate();
let that = this;
if (!err) {
this.setState({
jarvisURLError: ''
});
console.log(this.state);
var data = this.state.jarvisURL
//… a fetch API call
this.props.jarvisURLUpdated(this.state.jarvisURL);
}
}
jarvisURLUpdated调用父函数的函数在哪里，您可以根据需要设置父状态。然后，父母可以将URL传递给所需的孩子。
另一个选择是使用本地存储或cookie在浏览器中存储URL并重复使用（惯例也不建议使用）。如果您正在使用类似的东西react-router-dom并在单独的页面上显示信息，则此方法比事件冒泡要好一些（Redux可以消除由于全局状态而引起的事件冒泡的问题）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句