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

Question

我想将我的渲染分成几个部分。肯定有一些代码位丢失，因为我的真实代码有一千多行，例如这个。基本上我希望能够调用Page2和使用这些函数，handleSubmit并且handleChange在Page2. 但是当我调用 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>          );      }}第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为反应组件，并将这些函数引用作为道具传递，就像这样。

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

      )

    }

}

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>

};