Content of component: children

The content of the component is obtained using the props.children property

unction Button(props) {
  console.log("props",props);
  return (
    <>
      <div>Button_children:{props.children}</div>
    </>(Outer layer (no explicit root label)
  )
}
<Button >I am the content</Button>

refs: get DOM

Represents the reference to the real instance of the component (that is, the html tag, that is, the DOM object), which is actually the component instance returned by ReactDOM.render(); ref can be written in the official html tag or in components (custom tags), which means the same as vue's ref.

Official suggestion: don't overuse Refs (try not to operate DOM) and give priority to state (data-driven) when processing logic

usage
1) . assigned as a string (not recommended officially)

  <input type="text" ref="username" />
 
   this.refs.username.value

2) . assign as callback function

When adding a ref attribute to an HTML element, the ref callback receives the underlying DOM element as a parameter.

The ref callback is executed before the lifecycle callbacks such as componentDidMount or componentDidUpdate.

//When the value of ref is assigned to the callback function, the callback parameter is the current dom element.
// callback refs callback

<jsx ref={el => this.Define an instance property = el} //el is the dom object
    
    
this.Define an instance property //Later used to access jsx elements
//When the component is mounted, the DOM el element is passed to the callback of ref
//When the component is unloaded, null is passed.
//The ref callback will be invoked before the componentDidMount and componentDidUpdate lifecycle.
    
    For example:
  <input type="text" ref={(currDom) => this.input1  = currDom} />
  <input type="text" ref={(currDom) => this.input2 = currDom} />

3) . React.createRef() (provided by React16.3)

Use this method to create refs. Assign it to a variable, mount it on the dom node or component through ref, and the current attribute of the ref will get the instance of the dom node or component

//1. In the constructor
// instantiation 
this.firstRef = React.createRef() //Occurs in the constructor

//2. Mount on ref attribute
<jsx ref={this.firstRef} />
    
//3. Get dom raw
this.firstRef.current //current is the official attribute

Controlled element (component)

A tag (component) is controlled by react, data, functions, etc. (in fact, a tag (component) uses the things in react)

The value of the form is controlled and controlled by the data,

<input type="text" value={this.state.Data name}  /> //model controls the view.
<input type="text" onChange={this.method} />   //view control model

Bidirectional binding

class MyCom extends React.Component{
		constructor(){
			super();
			this.state={
				username:"Li Xiang"
			}
		}

		changeVal(e){
			this.setState({
				username:e.target.value
			})
		}

		render(){
			return (
				<div>
					<input type="text" value={this.state.username} onChange={(e)=>this.changeVal(e)} />
				</div>
			)
		}
	}	

Processing multiple input elements (bidirectional bound encapsulation)

You can add a name attribute for each element (usually consistent with the data name), and the processing function selects what to do according to the value of event.target.name

class MyCom extends React.Component{
    constructor(props){
        super(props);
        this.state={
            userName:'',
            content:''
        }
    }

    changeVal(ev){
        this.setState({
            [ev.target.name]:ev.target.value
        });Square brackets:????
    }

    render(){
        return (
            <div>
                <p>{this.state.userName}</p>
                <input name="userName" type="text" onChange={(ev)=>this.changeVal(ev)} />
                <p>{this.state.content}</p>
                <input name="content" type="text" onChange={(ev)=>this.changeVal(ev)} />
            </div>
        )
    }
}

Uncontrolled element (component)

To write an uncontrolled component instead of writing a data processing function for each status update, you can Using ref To get form data from the DOM node

<input type="text" value="ha-ha"  ref="xx" />

Default value

The value on the form element will overwrite the value in the DOM node. In uncontrolled components, you often want React to give the component an initial value, but do not control subsequent updates, and specify a defaultValue attribute instead of value