從 React.js 中的另一個 class 組件調用 function

Question

我想將我的渲染分成幾個部分。

一定有一些代碼位丟失，因為我的真實代碼超過一千行，例如這個。

基本上我希望能夠調用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>
           );
        }
      }    

感謝您的任何回復

Answer 1

您需要將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>
      )
    }
}

Answer 2

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