Question

所以基本上我试图从父节点访问子节点（返回文本框的输入）中的函数，但是我继续收到错误声明该函数不是函数

 MakeMethod.jsx:22 Uncaught TypeError: i.getState is not a function
        at MakeMethod.jsx:22
        at Array.map (<anonymous>)
        at MakeMethod.getAllInfo (MakeMethod.jsx:22)
        at onClick (MakeMethod.jsx:41)

我尝试过使用ref prop，但似乎并没有使用一系列组件。

用于从子节点返回props参数的方法/函数是getState()。用于存储来自子项的输入列表的方法/函数是getAllInfo()。

我有什么事情做得非常糟糕吗？如果是这样你能指出我吗？

非常感谢提前!!

父类是MakeMethod：

import React from 'react';
import "./MakeRecipe.css";
import Steps from "./Steps.jsx";
const count=1;
const theSteps=[]; //list of step components i want to access

class MakeMethod extends React.Component {
  constructor(){
    super();
    this.state = {
      count : 1,
    }
    this.AddMethod = this.AddMethod.bind(this);
    this.getAllInfo=this.getAllInfo.bind(this);
    theSteps.push(<Steps key={this.state.count} count={this.state.count} value={''}/>);
  }

  //this is the function i want to access all my information from
  getAllInfo(){
    let method=[];

    method=theSteps.map((i)=>
      i.getState() //iterates through each Step component and calls on the function getState()
                    //but it says that the function does not exist
      );
    this.setState({steps:method});
    console.log(method);
  }
    AddMethod(){
        let x=this.state.count+1;
        theSteps.push(<Steps key={x} count={x}/>);  
        this.setState({count:x}); 
    }
  render() {
    return (
      <div key={"method"}>
         <div>
           {theSteps}
         </div>
         <button onClick={()=>this.AddMethod()}>Add another method?</button>
         <button onClick={()=>this.getAllInfo()}>checking info</button>
      </div>
    );
  }
}

export default MakeMethod;

Child组件是Steps：

import React from 'react';
import "./MakeRecipe.css"
const count=1;

class Steps extends React.Component {

  constructor(props) {
      super();
      this.state = {value: ''};
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.getState = this.getState.bind(this);
    }

   //function that returns the value in the text box
    getState(){
      debugger;
      console.log(this.state.value); //tested and works
      return this.state.value; 
    }
   handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <div>
         <div id={this.props.count}>
           <a>Step: {this.props.count}</a>
           <input key={this.props.count} type="text" value={this.state.value} onChange={this.handleChange}/>
           <br/>
         </div>
         <button onClick={()=>this.getState()}/>
      </div>
    );
  }
}

export default Steps;

Answer 1

尝试控制日志您的组件，看看它将显示什么。

尝试i.getState。我认为它应该工作，因为你正在调用属性而不是函数的回调。

还将函数绑定到组件，如下所示：

getState = () => {
      debugger;
      console.log(this.state.value); //tested and works
      return this.state.value; 
}

因为.bind有很多内存泄漏。

Answer 2

我认为你并不完全了解React的生命周期，以及从Parent到Child的真正工作方式，反之亦然。

这是一个伪代码，可以帮助您找到正确的方向

import React from 'react'; 
import Steps from "./Steps";
const count=1;
const theSteps=[]; //list of step components i want to access

class MakeMethod extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      count : 1,
      theSteps:[] ,
      itemFromChild:''
    }
    this.AddMethod = this.AddMethod.bind(this);
    this.getAllInfo=this.getAllInfo.bind(this);
    this.state.theSteps.push(<Steps key={this.state.count} count={this.state.count} value={this.getAllInfo}/>);
  }

  //this is the function i want to access all my information from
      getAllInfo=(itemFromChild)=> {
        let method=[];
      this.setState({ itemFromChild });
       console.log(itemFromChild);
      } 
    getAllInfoLocal() {

       console.log(this.state.itemFromChild);
      } 
    AddMethod(){
        let x=this.state.count+1;
        theSteps.push(<Steps key={x} count={x}/>);  
        this.setState({count:x}); 
    }
  render() {
    return (
      <div key={"method"}>
          {this.state.itemFromChild}
         <div>
           {this.state.theSteps}
         </div>
         <button onClick={()=>this.AddMethod()}>Add another method?</button>
         <button onClick={()=>this.getAllInfoLocal()}>checking info</button>
      </div>
    );
  }
}

export default MakeMethod;

另一个班......：

class Steps extends React.Component {

  constructor(props) {
      super(props);
      this.state = {value: ''};
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.getState = this.getState.bind(this);
    }

   //function that returns the value in the text box
    getState(){
      debugger;
      console.log(this.state.value); //tested and works
      return this.state.value; 
    }
   handleChange =  (event) =>{
       console.log(event.target.value)
    this.setState({value: event.target.value});
     this.props.value(event.target.value);    
  }


  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <div>
         <div id={this.props.count}>
           <a>Step: {this.props.count}</a>
           <input key={this.props.count} type="text" value={this.state.value} onChange={this.handleChange}/>
           <br/>
         </div>
         <button onClick={()=>this.getState()}/>
      </div>
    );
  }
}

export default Steps;

希望它有所帮助...

React：访问子组件函数但给出未定义的错误

2 个答案: