从另一个类调用函数（反应）

Question

I'm really new to React and JS in general and have been following a tutorial of sorts.

Upon HandleFormSubmit running, I want to refresh data shown in the Contact Management table, since we've just pushed a bunch of new data.

How could I call fetchData() from within HandleFormSubmit? I'm struggling since is rendered in App.

Thanks

<script type="text/babel">

class ContactForm extends React.Component { 
    state = { 
        name: '',
        emai: '',
        country: '',
        city: '',
        job: '',
    }
    handleFormSubmit( event ) {
        event.preventDefault(); 

        let formData=new FormData();
        formData.append('name', this.state.name) 
        formData.append('email', this.state.email)
        formData.append('city', this.state.city)
        formData.append('country', this.state.country)
        formData.append('job', this.state.job)

        axios({
            method: 'post',
            url: '/api/contacts.php',
            data: formData,
            config: { headers: {'Content-Type': 'multipat/form-data' }}
        })
        .then(function (response){
            console.log(response)
            this.fetchData();
        })
        .catch(function (response) {
            console.log(response)
        });
    }

   render() { 
    return ( 
        <form> 
            <label>Name</label> 
            <input type="text" name="name" value={this.state.name} onChange={e => this.setState({ name: e.target.value})}/> 
            <label>Email</label>
            <input type="email" name="email" value={this.state.email} onChange={e => this.setState({ email: e.target.value})}/> 
            <label>Country</label>
            <input type="text" name="country" value={this.state.country} onChange={e => this.setState({ country: e.target.value})}/>    
            <label>City</label> 
            <input type="text" name="city" value={this.state.city} onChange={e => this.setState({ city: e.target.value})}/> 
            <label>Job</label>
            <input type="text" name="job" value={this.state.job} onChange={e => this.setState({ job: e.target.value})}/>    
            <input type="submit" onClick={e => this.handleFormSubmit(e)} value="Create Contact" />
        </form>)
    }
}   

class App extends React.Component {
    state = {
        contacts: []
    }
    render() {
      return ( 
        <React.Fragment> 
          <h1>Contact Management</h1> 
          <table border='1' width='100%'>
          <tr> 
            <th>Name</th> 
            <th>Email</th> 
            <th>Country</th>
            <th>City</th> 
            <th>Job</th> 
          </tr>
          {this.state.contacts.map((contact) => (
          <tr>
            <td>{ contact.name }</td>   
            <td>{ contact.email }</td>  
            <td>{ contact.country }</td>    
            <td>{ contact.city }</td>   
            <td>{ contact.job }</td>
          </tr>
          ))}
          </table>
          <ContactForm />
        </React.Fragment>   
    );
        }

    fetchData() {
        const url ='/api/contacts.php'
        axios.get(url).then(response => response.data).then((data) => {
            this.setState({ contacts: data })
            console.log(this.state.contacts) 
        })
    }

    componentDidMount() {
        this.fetchData();
       }
}   


ReactDOM.render(<App />, document.getElementById('root'));  
</script>

Answer 1

You can pass function reference from parent to child, like this

<ContactForm fetchData={this.fetchData}/>

and in parent component you can call that function like this

this.props.fetchData()

PS: don't forget to bind function in constructor.