从 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 {&nbsp; &nbsp; &nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.state= {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp; &nbsp;const { handleSubmit, handleChange} = this.props&nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Input type="number" step="0.01" name="test2" onChange={handleChange} value=&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.test || ''}/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Button type="submit" onSumbit={handleSubmit}> Update </Button>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}

Answer 2

<Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} test={this.state.test}/>在 Page2 代码上export default&nbsp; render2 = (props) => {&nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; <Input type="number" step="0.01" name="test2" onChange={props.handleChange} value=&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{props.test || ''}/> </Col>&nbsp; &nbsp; &nbsp; &nbsp; <Button type="submit" handleSubmit={props.handleSubmit}> Update </Button></div>};