Javascript 从React.js中的另一个类组件调用函数

我想把我的渲染分成几个部分

一定有一些代码位丢失了，因为我的真实代码超过了1000行，例如这一行

基本上，我希望能够调用

Page2

并使用

Page2

中的

handleSubmit

和

handleChange

。但是当我调用Page2时，代码显示他找不到handleSubmit和handleChange。我希望它能像我没有把代码分成几个函数一样工作。如果有人有想法：/

因此，我将代码按如下方式分开：

第1.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>
          );
      }
}

从“/Page2”导入{Page2}；
const initialState={test:''，test2:''}；
导出默认类Page1扩展组件{
建造师（道具）{
超级（道具）；
this.state=初始状态；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
const InputValue=event.target.value；
const stateField=event.target.name；
这是我的国家({
[stateField]：输入值，
});
console.log（this.state）；
}
异步handleSubmit（事件）{
this.setState（{loading:true}）；
event.preventDefault（）；
const{test=''}=this.state；
等待axios.post（“（端点API）”，
{key1:`${test}`）；
}
render（）{
返回(
this.setState（{tabIndex}）}>
非动态
自动化
更新
{this.Page2}
);
}
}

第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扩展组件{
render（）{
返回(
更新
);
}
}    

---

感谢您的回复

您需要将

page2

呈现为react组件，并将这些函数引用作为道具传递，如下图所示

<Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} />

在Page2组件中，您可以在props中获得上述函数参考

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扩展React.Component{
建造师（道具）{
超级（道具）；
此。状态={
}
}
render（）{
const{handleSubmit，handleChange}=this.props
返回(
更新
)
}
}

您需要将

page2

呈现为react组件，并将这些函数引用作为道具传递，如下所示

<Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} />

在Page2组件中，您可以在props中获得上述函数参考

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扩展React.Component{
建造师（道具）{
超级（道具）；
此。状态={
}
}
render（）{
const{handleSubmit，handleChange}=this.props
返回(
更新
)
}
}

第2页代码

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>
};

export default render2=（道具）=>{
返回
更新
};

第2页代码

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>
};

export default render2=（道具）=>{
返回
更新
};

谢谢，但我收到错误代码：“警告：此浏览器中无法识别标记。如果要呈现React组件，请以大写字母开头其名称。”以及“React无法识别DOM元素上的

handleChange

prop。如果您有意将其作为自定义属性显示在DOM中，请将其拼写为小写

handlechange

。如果意外地从父组件传递了它，请将其从DOM元素中删除。“。我不知道你是否知道我为什么会有这个奇怪的错误。日期你是page2组件名称它是

render2

。React组件，以大写字母开始其名称当您使用默认导出时，您可以在page1 component

import Page2 from./Page2'中这样导入是的，渲染2是一个书写错误。但问题出在大写字母上。我刚刚把第二页换成了第二页，它开始工作了。我要把这个例子放到我的代码里。但现在我知道谁在工作了。非常感谢您的感谢，但我收到了以下代码错误：“警告：此浏览器中无法识别标记。如果您要呈现React组件，请以大写字母开头其名称。”以及“React无法识别DOM元素上的
handleChange
prop。如果您有意将其作为自定义属性显示在DOM中，请将其拼写为小写
handlechange
。如果意外地从父组件传递了它，请将其从DOM元素中删除。“。我不知道你是否知道我为什么会有这个奇怪的错误。日期你是page2组件名称它是
render2
。React组件，以大写字母开始其名称当您使用默认导出时，您可以在page1 component
import Page2 from./Page2'中这样导入是的，渲染2是一个书写错误。但问题出在大写字母上。我刚刚把第二页换成了第二页，它开始工作了。我要把这个例子放到我的代码里。但现在我知道谁在工作了。非常感谢你