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