[英]Call a function from another class component in React.js
我想将我的渲染分成几个部分。
一定有一些代码位丢失,因为我的真实代码超过一千行,例如这个。
基本上我希望能够调用Page2
并在Page2
中使用函数handleSubmit
和handleChange
。 但是当我调用Page2 时,代码说他没有找到handleSubmit 和handleChange。 我希望它能够像我没有将我的代码分成几个函数一样工作。 如果有人有想法:/
所以我像这样分开我的代码:
Page1.js:
import {Page2} from './Page2';
const initialState = { test:'', test2: ''};
export default class Page1 extends Component {
constructor(props) {
super(props);
this.state = initialState;
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const InputValue = event.target.value;
const stateField = event.target.name;
this.setState({
[stateField]: InputValue,
});
console.log(this.state);
}
async handleSubmit(event) {
this.setState({ loading: true });
event.preventDefault();
const { test= ''} = this.state;
await axios.post(' (endpoint API)',
{ key1: `${test}`);
}
render() {
return (
<Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
<TabList>
<Tab >Non Dynamique</Tab>
<Tab> Automation </Tab>
</TabList>
<TabPanel>
<Input type="number" step="0.01" name="test" onChange={this.handleChange} value=
{this.state.test || ''}/> </Col>
<Button type="submit"> Update </Button>
</TabPanel>
<TabPanel>
{this.Page2}
</TabPanel>
);
}
}
第2页:
export class Page2 extends Component {
render() {
return(
<Input type="number" step="0.01" name="test2" onChange={this.handleChange} value=
{this.state.test || ''}/> </Col>
<Button type="submit"> Update </Button>
);
}
}
感谢您的任何回复
您需要将page2
渲染为反应组件,并将这些 function 引用作为类似这样的道具传递。
<Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} />
在 Page2 组件中,您可以在道具中获得上述 function 参考。
export default class Page2 extends React.Component {
constructor(props) {
super(props);
this.state= {
}
}
render() {
const { handleSubmit, handleChange} = this.props
return(
<div>
<Input type="number" step="0.01" name="test2" onChange={handleChange} value=
{this.state.test || ''}/>
<Button type="submit" onSumbit={handleSubmit}> Update </Button>
</div>
)
}
}
<Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} test={this.state.test}/>
在 Page2 代码上
export default render2 = (props) => {
return <div>
<Input type="number" step="0.01" name="test2" onChange={props.handleChange} value=
{props.test || ''}/> </Col>
<Button type="submit" handleSubmit={props.handleSubmit}> Update </Button>
</div>
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.