javascript - react checks that the input box is not rendered for the first time, checks whether there is a default value, and in which life cycle it is written

Question

Scene description

1. I have a news list, and the news list has an edit button
2. Clicking the edit button will bring up a pop-up box with default values, but some input boxes are empty
3 .The input box in the click-edit pop-up box is a separate component.

Problem Description

Because the input box in the pop-up box is a separate component, after I change one news, I will click the edit of another news, so I want to ask in which life cycle I should check each click. Whether the input box in the pop-up box has a default value and responds accordingly.

Answer 1

componentWillMount

Answer 2

componentDidMount

Answer 3

Since there is an input box, the value of the input box should be a state of the pop-up box. If there is only one pop-up box at a time, the pop-up box only needs to maintain one instance. So receive the incoming data in componentWillRecevieProps and set the value of the state based on the data:

componentWillRecevieProps (nextProps) {
  this.setState({news: nextProps.news})
}