在 React 中更新子道具组件后更改父 state？

Question

I'm newish to react. I have a fetch call in my App Component that I assign to a state. I pass that state as a prop along with a function to make a post to a child component. In my child component you can post/delete to alter the props, currently don't have a push() to add the new contact/prop. Is there a way to alter the parent component's state after I change the childs props? is there a better way to do this?

I'm trying to get the post action to update the state on the App.

App code

class App extends Component {

  constructor() {
    super();
    this.state= {
      contacts:[], 
      addModalShow: false,
      modalIsOpen: false
    }
  }

  componentDidMount() {
      var request = new Request('http://localhost:3000/', {
          method: "GET",
      });
      fetch(request)
          .then((res) => {
              res.json()
                  .then((data) => {
                      this.setState({
                        contacts: data.rows
                      })
                  })
          })
  }

  toggleModal() {
    this.setState({
        modalIsOpen: ! this.state.modalIsOpen
    })
}

  addContact(event) {
        this.toggleModal()
        event.preventDefault();
        let contactData = {
            first: this.refs.first.value,
            last: this.refs.last.value,
            phone: this.refs.phone.value,
            email: this.refs.email.value,
        };
        var request = new Request('http://localhost:3000/add', {
            method: "POST",
            headers: new Headers({ 'Content-Type': 'application/json' }),
            body: JSON.stringify(contactData)
        });

        console.log(this.state)

        fetch(request)
            .then((res) => {
                res.json()
                    .then((data) => {
                    })
            })
            .catch((err) => {
                console.log(err)
            })
    }

  render() {

    return (
      <Container>
        {console.log(this.state)}
        <AddContact  addContact={this.addContact} contacts={this.state.contacts} />
        <ContactList contacts={this.state.contacts} />
        <Contacts contacts={this.state.contacts}/>

      </Container>
    );
  }
}

export default App;

Child component

class AddContact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            contacts: [],
            modalIsOpen: false,
        }
    }

    toggleModal() {
        this.setState({
            modalIsOpen: ! this.state.modalIsOpen
        })
    }


    render() {
        return(
            <Container>
                <div className='header'>
                    <h1>
                        My Contacts
                        <button className='addContactButton' onClick={this.toggleModal.bind(this)}>+</button>
                    </h1>
                    <hr />
                </div>
                <Modal isOpen={this.state.modalIsOpen}>
                <form ref='addContact' >
                    <div className='addContactHeader'>
                        <button className='saveButton' onClick={this.props.addContact.bind(this)}>Save</button>
                        <button className='cancelButton' onClick={this.toggleModal.bind(this)}>Cancel</button>
                    </div>
                    <div id="circle">
                        Add Photo
                    </div>
                    <div className="inputFields">
                        <div className='nameInputs'> 
                            <input type='text' ref='first' placeholder='first name' />
                            <input type='text' ref='last' placeholder='last name' />
                        </div>
                        <div className='extraInputs' >
                            <input type='text' ref='phone' placeholder='phone' />
                            <input type='text' ref='email' placeholder='email' />
                        </div>
                    </div>
                </form>

                </Modal>
          </Container>
        )
    }  
}

Thanks for your time

Answer 1

You could use a callback function in order to update the state on the parent component (Another approach would be to use Redux updating the value in the Store, that way both components could have access to the value), here's how you could use the callback (With a little bit of ES6 refactor):

App:

class App extends Component {
  state= {
    contacts:[], 
    addModalShow: false,
    modalIsOpen: false
  }

  componentDidMount() {
    let request = new Request('http://localhost:3000/', {
        method: "GET",
    });

    fetch(request)
        .then((res) => {
            res.json()
                .then((data) => { this.setState({ contacts: data.rows }) })
        })
   }

  toggleModal = () => {
    this.setState({ modalIsOpen: ! this.state.modalIsOpen })
  };

  addContact = event => {
        this.toggleModal()
        event.preventDefault();
        let contactData = {
            first: this.refs.first.value,
            last: this.refs.last.value,
            phone: this.refs.phone.value,
            email: this.refs.email.value,
        };
        let request = new Request('http://localhost:3000/add', {
            method: "POST",
            headers: new Headers({ 'Content-Type': 'application/json' }),
            body: JSON.stringify(contactData)
        });

        fetch(request)
            .then((res) => {
                res.json()
                    .then((data) => {
                    })
            })
            .catch((err) => {
                console.log(err)
            })
    };

  changeContacts = (newData) => {
    this.setState({ contacts: newData });
  };

  render() {
    const { contacts } = this.state; 

    return (
      <Container>
        <AddContact
          addContact={this.addContact}
          contacts={contacts}
          onChildAction={this.changeContacts}
        />
        <ContactList contacts={contacts} />
        <Contacts contacts={contacts}/>
      </Container>
    );
  }
}

export default App;

AddContacts:

class AddContact extends Component {
    state = {
      contacts: [],
      modalIsOpen: false,
    }

    toggleModal = () => {
        this.setState({ modalIsOpen: ! this.state.modalIsOpen })
    };

    // Here is where you'll send the info for the change of the prop
    changeProp = e => {
      const { onChildAction } = this.props;
      onChildAction('Your new state/prop value here')
      addContact(e);
    };

    render() {
    const { changeProp } = this.props;
    const { modalIsOpen } = this.state;

    return(
      <Container>
        <div className='header'>
          <h1>My Contacts
            <button className='addContactButton' onClick={this.toggleModal}>+</button>
          </h1>
          <hr />
        </div>
        <Modal isOpen={modalIsOpen}>
          <form ref='addContact' >
            <div className='addContactHeader'>
              <button className='saveButton' onClick={changeProp}>Save</button>
              <button className='cancelButton' onClick={this.toggleModal}>Cancel</button>
             </div>
             <div id="circle">Add Photo</div>
             <div className="inputFields">
               <div className='nameInputs'> 
                 <input type='text' ref='first' placeholder='first name' />
                 <input type='text' ref='last' placeholder='last name' />
               </div>
               <div className='extraInputs' >
                 <input type='text' ref='phone' placeholder='phone' />
                 <input type='text' ref='email' placeholder='email' />
               </div>
             </div>
           </form>
         </Modal>
      </Container>
    )
  }  
}

The last thing you need to do is decide where you want the change of the state/prop to be fire. Hope this helps.

Answer 2

to handle the parent from child you need to bind this to the child

Parent Component

    class Component extends React.Component {
          constructor(props) {
            super(props)
            this.state= {
              contacts:[], 
              addModalShow: false,
              modalIsOpen: false
            }
            this.addContact = this.addContact.bind(this);
        }
          render() {
...
            return <AddContact addContact = {this.addContact} />
          }
        addContact(event) {
          ...
          alert('one contact added');
          ...}
        }

inside AddContact Component:

you can call this.props.addContact() to excute the parent function