有什么方法可以在组件A的方法中添加事件侦听器，并将目标放置在单独的组件中

Question

I want to add an event listener to the component Table so that every time I save a form in the component Form by the method saveForm() I call a method called showData() in the component Table .

Form Component

let persons = [];

if (JSON.parse(localStorage.getItem("personsForms")) !== null)
    persons = JSON.parse(localStorage.getItem("personsForms"));


saveForm(myForm) {
        persons.push(myForm);
        localStorage.setItem("personsForms", JSON.stringify(persons));

    }

Table Component

let persons;

let localStoragePersons = JSON.parse(localStorage.getItem("personsForms"));
persons = localStoragePersons !== null ? localStoragePersons : [];


    showData() {
        let table = document.getElementById('editableTable');
        let x = table.rows.length;
        while (--x) {
            table.deleteRow(x);
        }
        let i = 0;

        ...........
    }

Answer 1

Assuming that Table component is the parent component of Form component.

Pass the method as a prop to Form Component and call it accessing to the props (this.props.parentMethod())

Answer 2

From React DOCS :

Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand, so follow these steps to figure it out:

React's one-way data flow is meant to be top-down , parent-child. The way you're suggesting would be sibling-to-sibling, which would be side-to-side instead of top-down . This is an anti-pattern.

You can set up your component hierarchy like this:

See it that works for you.

 function App() { function doSomethingApp(formValue) { console.log('Do something from App!'); console.log('Form value is: ' + formValue); } return( <React.Fragment> <Table/> <Form doSomethingApp={doSomethingApp} /> </React.Fragment> ); } function Table(props) { function doSomethingTable(formValue) { console.log('Do something from Table!'); console.log('Form value is: ' + formValue); } return( <div>I am Table</div> ); } function Form(props) { const [value,setValue] = React.useState(''); return( <React.Fragment> <div>I am Form</div> <input type='text' value={value} onChange={()=>setValue(event.target.value)}/> <div> <button onClick={()=>props.doSomethingApp(value)}>Do something from App</button> </div> </React.Fragment> ); } ReactDOM.render(<App/>,document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"></div> 

---

SNIPPET: ATTENTION, THIS IS AN ANTI-PATTERN

Although I wouldn't recommend this at all. This is a working example with the anti-pattern you requested.

Sibling1 has a useEffect which updates a state on the common parent App with its method showData . Whenever showData changes, the effect is run again and keeps it updated. showData is a memoized callback. You can add a depedency array to update this memoized callback whenever some other variable changes.

Source: Hooks API Reference

 function App() { const [sibling1Method,setSibling1Method] = React.useState({method: null}); return( <React.Fragment> <Sibling1 setSibling1Method={setSibling1Method} /> <Sibling2 sibling1Method={sibling1Method} /> </React.Fragment> ); } function Sibling1(props) { const showData = React.useCallback((formValue) => { console.log('A click from Sibling2 is triggering a Sibling1 Method'); },[]); React.useEffect(()=>{ props.setSibling1Method({method: showData}); },[showData]); return( <div>Sibling 1 </div> ); } function Sibling2(props) { return( <React.Fragment> <span>Sibling 2 </span> <button onClick={()=>props.sibling1Method.method()}>Click</button> </React.Fragment> ); } ReactDOM.render(<App/>,document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"></div>