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

Posted 2023-02-23

【中文标题】从 React.js 中的另一个类组件调用函数

【英文标题】：Call a function from another class component in React.js

【发布时间】：2020-03-11 12:39:56

【问题描述】：

我想将我的渲染分成几个部分。

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

基本上我希望能够调用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>
           );
        
          

感谢您的回复

【参考方案1】：

您需要将page2 渲染为反应组件，并将这些函数引用作为道具传递，就像这样。

<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>
      )
    

【讨论】：

谢谢，但我收到此代码错误：“警告：标签 在此浏览器中无法识别。如果您要渲染 React 组件，请以大写字母开头。”和“React 无法识别 DOM 元素上的 handleChange 属性。如果您故意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 handlechange。如果您不小心从父组件传递了它，从 DOM 元素中删除它。”。我不知道你是否知道我为什么会出现这个奇怪的错误

更新你的 page2 组件名称是render2。 React 组件，名称以大写字母开头

当您使用默认导出时，您可以在 page1 组件import Page2 from './Page2'; 中像这样导入

是的，render2 是写错了。但这是大写的问题。我刚刚在 的 Page2 中替换了 page2 ，它正在工作。我将尝试将此示例放入我的代码中。但现在我看到了谁在工作。所以非常感谢你

【参考方案2】：

<Page2 handleChange=this.handleChange handleSubmit=this.handleSubmit test=this.state.test/>

在第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>
;