React 进阶提升
文章目录
#货币转换器
条件渲染
-
if条件渲染: 如果用户输入的金额>=10元, 购买成功
import React from 'react'; import ReactDOM from 'react-dom'; function BuySomeThing(props){ if(props.money>10){ return <h2>购买成功!金额:Y{props.money},找零:Y{props.money-10}</h2> }else { return <h2>购买失败!金额:Y{props.money}</h2> } } ReactDOM.render(<BuySomeThing money={12}></BuySomeThing>, document.getElementById('root'));
受控组件
在html中, input, select, textarea这些表单元素都会默认维护自己的状态，React通过受控组件将用户输入的内容保存到state中，通过渲染表单组件，控制用户输入之后发生的变化。
import React from 'react';
import ReactDOM from 'react-dom';
function BuySomeThing(props) {
if (props.money > 10) {
return <h2>购买成功!金额:Y{props.money},找零:Y{props.money - 10}</h2>
} else {
return <h2>购买失败!金额:Y{props.money}</h2>
}
}
class App extends React.Component {
constructor(){
super()
this.state={
money:0
}
}
moneyChange=(e)=>{
let money = e.target.value
money = money.substring(0,6)
//设置值
this.setState({
money:money
})
}
render() {
return (
<div>
<h2>付款计算器,货币兑换</h2>
<fieldset>
<legend>
请输入付款金额(人民币)
</legend>
<input type="number" value={this.state.money} onChange={this.moneyChange}/>
</fieldset>
<BuySomeThing money={this.state.money}></BuySomeThing>
</div>
);
}
}
ReactDOM.render(<App></App>, document.getElementById('root'));
状态提升
如果有多个组件需要共享状态数据，把要MoneyInput共享的数据state={money, unit}提升到他们最近的共同父组件App中。
数据源要保证只有一个，并保持自上而下的数据流结构
-
未提升状态
import React from 'react'; import ReactDOM from 'react-dom'; function BuySomeThing(props) { if (props.money > 10) { return <h2>购买成功!金额:Y{props.money},找零:Y{props.money - 10}</h2> } else { return <h2>购买失败!金额:Y{props.money}</h2> } } class App extends React.Component { constructor(){ super() this.state={ rmb:0, usd:0 } } rmbChange=(e)=>{ let rmb = e.target.value this.setState({ rmb:rmb }) } usdChange=(e)=>{ let usd = e.target.value this.setState({ usd:usd }) } render() { return ( <div> <h2>付款计算器,货币兑换</h2> <fieldset> <legend> 请输入付款金额(人民币) </legend> <input type="number" value={this.state.rmb} onChange={this.rmbChange}/> </fieldset> <fieldset> <legend> 请输入付款金额(美金) </legend> <input type="number" value={this.state.usd} onChange={this.usdChange}/> </fieldset> <BuySomeThing money={this.state.money}></BuySomeThing> </div> ); } } ReactDOM.render(<App></App>, document.getElementById('root')); -
状态提升
import React from 'react'; import ReactDOM from 'react-dom'; function BuySomeThing(props) { if (props.money > 10) { return <h2>购买成功!金额:Y{props.money},找零:Y{props.money - 10}</h2> } else { return <h2>购买失败!金额:Y{props.money}</h2> } } class InputWidget extends React.Component { constructor(){ super() this.state={ money:0 } } uids = { 'rmb':'人民币', 'usd':'美金' } handChange=(e)=>{ let money = e.target.value this.setState({ money:money }) this.props.onMoneyInput(money) } render() { return ( <fieldset> <legend> 请输入付款金额({this.uids[this.props.uid]}) </legend> <input type="number" value={this.state.money} onChange={this.handChange}/> </fieldset> ); } } class App extends React.Component { constructor() { super() this.state = { rmb: 0, usd: 0 } } rmbChange = (money) => { console.log('人民币:'+money) } usdChange = (money) => { console.log('美金:'+money) } render() { return ( <div> <h2>付款计算器,货币兑换</h2> <InputWidget uid={'rmb'} onMoneyInput={this.rmbChange}></InputWidget> <InputWidget uid={'usd'} onMoneyInput={this.usdChange}></InputWidget> <BuySomeThing money={this.state.money}></BuySomeThing> </div> ); } } ReactDOM.render(<App></App>, document.getElementById('root'));
总结:
- 用户在MoneyInput组件中输入了数值
- 在input的onChange函数中，监听到了变化，把money传给父组件
- 父组件设置并更新到唯一的state中，状态提升完毕
-
状态提升之后的更新处理
import React from 'react'; import ReactDOM from 'react-dom'; function BuySomeThing(props) { if (props.money > 10) { return <h2>购买成功!金额:Y{props.money},找零:Y{props.money - 10}</h2> } else { return <h2>购买失败!金额:Y{props.money}</h2> } } class InputWidget extends React.Component { constructor(){ super() this.state={ money:0 } } uids = { 'rmb':'人民币', 'usd':'美金' } handChange=(e)=>{ let money = e.target.value this.setState({ money:money }) this.props.onMoneyInput(money) } render() { return ( <fieldset> <legend> 请输入付款金额({this.uids[this.props.uid]}) </legend> <input type="number" value={this.state.money} onChange={this.handChange}/> </fieldset> ); } } class App extends React.Component { constructor() { super() this.state = { rmb: 0, usd: 0, money:0 } } rmbChange = (money) => { this.setState({ money:money }) } usdChange = (money) => { this.setState({ money:money*6.5 }) } render() { return ( <div> <h2>付款计算器,货币兑换</h2> <InputWidget uid={'rmb'} onMoneyInput={this.rmbChange}></InputWidget> <InputWidget uid={'usd'} onMoneyInput={this.usdChange}></InputWidget> <BuySomeThing money={this.state.money}></BuySomeThing> </div> ); } } ReactDOM.render(<App></App>, document.getElementById('root')); -
状态联动
import React from 'react'; import ReactDOM from 'react-dom'; function BuySomeThing(props) { if (props.money > 10) { return <h2>购买成功!金额:Y{props.money},找零:Y{props.money - 10}</h2> } else { return <h2>购买失败!金额:Y{props.money}</h2> } } class InputWidget extends React.Component { constructor(){ super() // this.state={ // money:0 // } } uids = { 'rmb':'人民币', 'usd':'美金' } handChange=(e)=>{ let money = e.target.value // this.setState({ // money:money // }) this.props.onMoneyInput(money) } render() { return ( <fieldset> <legend> 请输入付款金额({this.uids[this.props.uid]}) </legend> <input type="number" value={this.props.money} onChange={this.handChange}/> </fieldset> ); } } class App extends React.Component { constructor() { super() this.state = { money:0, uid:'rmb' } } rmbChange = (money) => { this.setState({ uid:'rmb', money:money }) } usdChange = (money) => { this.setState({ uid:'usd', money:money }) } render() { let money = this.state.money let uid = this.state.uid //计算人民币和美金 let rmb = uid=='rmb'?money:(money*6.5) let usd = uid=='usd'?money:(money/6.5) return ( <div> <h2>付款计算器,货币兑换</h2> <InputWidget uid={'rmb'} money={rmb} onMoneyInput={this.rmbChange}></InputWidget> <InputWidget uid={'usd'} money={usd} onMoneyInput={this.usdChange}></InputWidget> <BuySomeThing money={this.state.money}></BuySomeThing> </div> ); } } ReactDOM.render(<App></App>, document.getElementById('root')); -
处理货币转换:函数回调
import React from 'react'; import ReactDOM from 'react-dom'; function BuySomeThing(props) { if (props.money > 10) { return <h2>购买成功!金额:Y{props.money},找零:Y{props.money - 10}</h2> } else { return <h2>购买失败!金额:Y{props.money}</h2> } } class InputWidget extends React.Component { constructor(){ super() // this.state={ // money:0 // } } uids = { 'rmb':'人民币', 'usd':'美金' } handChange=(e)=>{ let money = e.target.value // this.setState({ // money:money // }) this.props.onMoneyInput(money) } render() { return ( <fieldset> <legend> 请输入付款金额({this.uids[this.props.uid]}) </legend> <input type="number" value={this.props.money} onChange={this.handChange}/> </fieldset> ); } } class App extends React.Component { constructor() { super() this.state = { money:0, uid:'rmb' } } rmbChange = (money) => { this.setState({ uid:'rmb', money:money }) } usdChange = (money) => { this.setState({ uid:'usd', money:money }) } toRMB(money){ return money*6.5 } toUSD(money){ return money/6.5 } convert(converter,money){ let result = converter(money) result = parseInt(result*1000)/1000 return result } render() { let money = this.state.money let uid = this.state.uid //计算人民币和美金 let rmb = uid=='rmb'?money:this.convert(this.toRMB,money) let usd = uid=='usd'?money:this.convert(this.toUSD,money) return ( <div> <h2>付款计算器,货币兑换</h2> <InputWidget uid={'rmb'} money={rmb} onMoneyInput={this.rmbChange}></InputWidget> <InputWidget uid={'usd'} money={usd} onMoneyInput={this.usdChange}></InputWidget> <BuySomeThing money={this.state.money}></BuySomeThing> </div> ); } } ReactDOM.render(<App></App>, document.getElementById('root')); -
代码简化
import React from 'react'; import ReactDOM from 'react-dom'; function BuySomeThing(props) { if (props.money > 10) { return <h2>购买成功!金额:Y{props.money},找零:Y{props.money - 10}</h2> } else { return <h2>购买失败!金额:Y{props.money}</h2> } } class InputWidget extends React.Component { constructor(){ super() // this.state={ // money:0 // } } uids = { 'rmb':'人民币', 'usd':'美金' } handChange=(e)=>{ let money = e.target.value // this.setState({ // money:money // }) this.props.onMoneyInput(money) } render() { return ( <fieldset> <legend> 请输入付款金额({this.uids[this.props.uid]}) </legend> <input type="number" value={this.props.money} onChange={(e)=>{ let money = e.target.value // this.setState({ // money:money // }) this.props.onMoneyInput(money) }}/> </fieldset> ); } } class App extends React.Component { constructor() { super() this.state = { money:0, uid:'rmb' } } toRMB(money){ return money*6.5 } toUSD(money){ return money/6.5 } convert(converter,money){ let result = converter(money) result = parseInt(result*1000)/1000 return result } render() { let money = this.state.money let uid = this.state.uid //计算人民币和美金 let rmb = uid=='rmb'?money:this.convert(this.toRMB,money) let usd = uid=='usd'?money:this.convert(this.toUSD,money) return ( <div> <h2>付款计算器,货币兑换</h2> <InputWidget uid={'rmb'} money={rmb} onMoneyInput={(money) => { this.setState({ uid:'rmb', money:money }) }}></InputWidget> <InputWidget uid={'usd'} money={usd} onMoneyInput={(money) => { this.setState({ uid:'usd', money:money }) }}></InputWidget> <BuySomeThing money={this.state.money}></BuySomeThing> </div> ); } } ReactDOM.render(<App></App>, document.getElementById('root'));
TODO-LIST
GTD软件: Getting things done
记事本布局
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render() {
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
<li>
<span>抽烟</span>
<span>X</span>
</li>
<li>
<span>喝酒</span>
<span>X</span>
</li>
<li>
<span>烫头</span>
<span>X</span>
</li>
</ul>
<div>
<input type="text"/>
<button>添加</button>
</div>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
提取底部控件
import React from 'react';
import ReactDOM from 'react-dom';
class AddItem extends React.Component{
render() {
return (
<div>
<input type="text"/>
<button>添加</button>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
<li>
<span>抽烟</span>
<span>X</span>
</li>
<li>
<span>喝酒</span>
<span>X</span>
</li>
<li>
<span>烫头</span>
<span>X</span>
</li>
</ul>
<AddItem/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
受控组件的状态提升
import React from 'react';
import ReactDOM from 'react-dom';
class AddItem extends React.Component{
constructor(){
super()
this.state={
input:''
}
}
handChange=(e)=>{
let input = e.target.value
this.setState({
input:input
})
}
handClick=()=>{
this.props.onAddClick(this.state.input)
}
render() {
return (
<div>
<input type="text" value={this.state.input} onChange={this.handChange}/>
<button onClick={this.handClick}>添加</button>
</div>
);
}
}
class App extends React.Component{
handAdd(input){
console.log('输入了:'+input)
}
render() {
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
<li>
<span>抽烟</span>
<span>X</span>
</li>
<li>
<span>喝酒</span>
<span>X</span>
</li>
<li>
<span>烫头</span>
<span>X</span>
</li>
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
ref的使用
ref的第一种用法
this.inRef = React.createRef()
import React from 'react';
import ReactDOM from 'react-dom';
class AddItem extends React.Component{
constructor(){
super()
this.inRef = React.createRef()
}
handClick=()=>{
let input = this.inRef.current.value
this.props.onAddClick(input)
}
render() {
return (
<div>
<input type="text" ref={this.inRef}/>
<button ref={this.btRef} onClick={this.handClick}>添加</button>
</div>
);
}
}
class App extends React.Component{
handAdd(input){
console.log('输入了:'+input)
}
render() {
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
<li>
<span>抽烟</span>
<span>X</span>
</li>
<li>
<span>喝酒</span>
<span>X</span>
</li>
<li>
<span>烫头</span>
<span>X</span>
</li>
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
ref的第二种用法
myRef=(instance)=>{
this.inRef = instance
}
import React from 'react';
import ReactDOM from 'react-dom';
class AddItem extends React.Component{
constructor(){
super()
}
handClick=()=>{
let input = this.inRef.value
this.props.onAddClick(input)
}
myRef=(instance)=>{
this.inRef = instance
}
render() {
return (
<div>
<input type="text" ref={this.myRef}/>
<button ref={this.btRef} onClick={this.handClick}>添加</button>
</div>
);
}
}
class App extends React.Component{
handAdd(input){
console.log('输入了:'+input)
}
render() {
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
<li>
<span>抽烟</span>
<span>X</span>
</li>
<li>
<span>喝酒</span>
<span>X</span>
</li>
<li>
<span>烫头</span>
<span>X</span>
</li>
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
ref的简便使用
import React from 'react';
import ReactDOM from 'react-dom';
class AddItem extends React.Component{
constructor(){
super()
}
handClick=()=>{
let input = this.inRef.value
this.props.onAddClick(input)
}
myRef=(instance)=>{
this.inRef = instance
}
render() {
return (
<div>
<input type="text" ref={(instance)=>{this.inRef = instance}}/>
<button ref={this.btRef} onClick={this.handClick}>添加</button>
</div>
);
}
}
class App extends React.Component{
handAdd(input){
console.log('输入了:'+input)
}
render() {
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
<li>
<span>抽烟</span>
<span>X</span>
</li>
<li>
<span>喝酒</span>
<span>X</span>
</li>
<li>
<span>烫头</span>
<span>X</span>
</li>
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
注意:
1.ref可以用在DOM元素上
2.ref可以用在类组件上3.ref不能用在函数组件上
添加条目功能
this.state.todos.map((val,index,arr)=>{
return <li>{val}</li>
})
import React from 'react';
import ReactDOM from 'react-dom';
class AddItem extends React.Component{
constructor(){
super()
}
handClick=()=>{
let input = this.inRef.value
this.props.onAddClick(input)
}
myRef=(instance)=>{
this.inRef = instance
}
render() {
return (
<div>
<input type="text" ref={(instance)=>{this.inRef = instance}}/>
<button ref={this.btRef} onClick={this.handClick}>添加</button>
</div>
);
}
}
class App extends React.Component{
constructor(){
super()
this.state={
todos:[]
}
}
handAdd=(input)=>{
let todos = this.state.todos
todos.push(input)
this.setState({
todos:todos
})
}
render() {
let list = this.state.todos.map((val,index,arr)=>{
return <li>{val}</li>
})
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
{list}
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
##提取LiItem和AddItem
import React from "react";
import '../css/todoItem.css'
export default class LiItem extends React.Component {
handClick=()=>{
this.props.onDeleteClick(this.props.index)
}
render() {
return (
<li className='todo-item'>
<span className='item-name'>{this.props.title}</span>
<span className='item-remove' onClick={this.handClick}>X</span>
</li>
);
}
}
import React from "react";
import '../css/addItem.css'
export default class AddItem extends React.Component{
constructor(){
super()
}
handClick=()=>{
let input = this.inRef.value
if(input.trim()=='')return
this.props.onAddClick(input)
this.inRef.value=''
}
myRef=(instance)=>{
this.inRef = instance
}
render() {
return (
<div className='add-item'>
<input type="text" ref={(instance)=>{this.inRef = instance}}/>
<button ref={this.btRef} onClick={this.handClick}>添加</button>
</div>
);
}
}
删除条目
import React from 'react';
import ReactDOM from 'react-dom';
import LiItem from './exportjs/LiItem'
import AddItem from './exportjs/AddItem'
class App extends React.Component{
constructor(){
super()
this.state={
todos:[]
}
}
handAdd=(input)=>{
let todos = this.state.todos
todos.push(input)
this.setState({
todos:todos
})
}
handDeleteClick=(index)=>{
let todos = this.state.todos
todos.splice(index,1)
this.setState({
todos:todos
})
}
render() {
let list = this.state.todos.map((val,index,arr)=>{
return <LiItem title={val} key={index} index={index} onDeleteClick={this.handDeleteClick}></LiItem>
})
return (
<div>
<h2>GTD记事本</h2>
<p>明日复明日,明日何其多</p>
<ul>
{list}
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
设置css样式
条件渲染_完成和未完成
import React from 'react';
import ReactDOM from 'react-dom';
import LiItem from './exportjs/LiItem'
import AddItem from './exportjs/AddItem'
import './css/index.css'
class App extends React.Component{
constructor(){
super()
this.state={
todos:[]
}
}
handAdd=(input)=>{
let todos = this.state.todos
todos.push(input)
this.setState({
todos:todos
})
}
handDeleteClick=(index)=>{
let todos = this.state.todos
todos.splice(index,1)
this.setState({
todos:todos
})
}
render() {
let list = this.state.todos.map((val,index,arr)=>{
return <LiItem title={val} key={index} index={index} onDeleteClick={this.handDeleteClick}></LiItem>
})
let waitComplete = <p>明日复明日,明日何其多</p>
let complete = <p>所有事情都已完成</p>
console.log(this.state.todos.length===0?complete:waitComplete)
return (
<div className={'todo-list'}>
<h2>GTD记事本</h2>
{this.state.todos.length===0?complete:waitComplete}
<ul>
{list}
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
路由
安装：
yarn add react-router-dom
导入Module：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
声明路由器及路由：
第一个App组件一般用来定义路由
<Router>
<div>
<Route exact={true} path="/" render={() => (<TodoComponent showTitle={true} />)}/>
<Route path="/about" component={About}/>
</div>
</Router>
通过Link跳转
<Link to="/about">关于about</Link>
<Link to="/">主页Home</Link>
- 通过path声明路由路径；
exact={true}表示严格匹配path- 通过component指定要渲染的组件；
- 通过render属性配合箭头函数，可以给组件传入属性参数。
- 通过Link的to属性指定要跳转的路径
import React from 'react';
import ReactDOM from 'react-dom';
import LiItem from './exportjs/LiItem'
import AddItem from './exportjs/AddItem'
import './css/index.css'
import About from './exportjs/About'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
class Content extends React.Component{
constructor(){
super()
this.state={
todos:[]
}
}
handAdd=(input)=>{
let todos = this.state.todos
todos.push(input)
this.setState({
todos:todos
})
}
handDeleteClick=(index)=>{
let todos = this.state.todos
todos.splice(index,1)
this.setState({
todos:todos
})
}
render() {
let list = this.state.todos.map((val,index,arr)=>{
return <LiItem title={val} key={index} index={index} onDeleteClick={this.handDeleteClick}></LiItem>
})
let waitComplete = <p>明日复明日,明日何其多</p>
let complete = <p>所有事情都已完成</p>
console.log(this.state.todos.length===0?complete:waitComplete)
return (
<div className={'todo-list'}>
<Link to='/about'>关于</Link>
<h2>GTD记事本</h2>
{this.state.todos.length===0?complete:waitComplete}
<ul>
{list}
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<Router>
<div>
<Route exact={true} path="/" component={Content}/>
<Route path="/about" component={About}/>
</div>
</Router>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
About界面-组合
React提供了强大的组合模型，官方建议使用组合（而非继承）来复用组件代码。
- 包含组件
{this.props.children}
import React from 'react';
import ReactDOM from 'react-dom';
import LiItem from './exportjs/LiItem'
import AddItem from './exportjs/AddItem'
import './css/index.css'
import About from './exportjs/About'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
//见about界面
class Content extends React.Component{
constructor(){
super()
this.state={
todos:[]
}
}
handAdd=(input)=>{
let todos = this.state.todos
todos.push(input)
this.setState({
todos:todos
})
}
handDeleteClick=(index)=>{
let todos = this.state.todos
todos.splice(index,1)
this.setState({
todos:todos
})
}
render() {
let list = this.state.todos.map((val,index,arr)=>{
return <LiItem title={val} key={index} index={index} onDeleteClick={this.handDeleteClick}></LiItem>
})
let waitComplete = <p>明日复明日,明日何其多</p>
let complete = <p>所有事情都已完成</p>
console.log(this.state.todos.length===0?complete:waitComplete)
return (
<div className={'todo-list'}>
<Link to='/about'>关于</Link>
<h2>GTD记事本</h2>
{this.state.todos.length===0?complete:waitComplete}
<ul>
{list}
</ul>
<AddItem onAddClick={this.handAdd}/>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<Router>
<div>
<Route exact={true} path="/" component={Content}/>
<Route path="/about" component={About}/>
</div>
</Router>
);
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
非受控组件
- 如果希望表单数据由DOM处理，可以使用非受控组件方式。
- 常见的表单受控组件及 设置/获取 值方式如下：
| 元素 | 属性值 | 变化回调 | 在回调中获取值 |
|---|---|---|---|
<input type="text" /> | value="string" | onChange | event.target.value |
<input type="checkbox" /> | checked={boolean} | onChange | event.target.checked |
<input type="radio" /> | checked={boolean} | onChange | event.target.checked |
<textarea /> | value="string" | onChange | event.target.value |
<select /> | value="option value" | onChange | event.target.value |
-
在受控组件和非受控组件之间抉择：参考文档
如果表单的UI交互非常简单：通过refs实现非受控组件即可。
如果表单的UI交互比较复杂：官方推荐使用受控组件实现表单，把DOM节点/React元素的值或数据交给React组件处理(保存到state)。
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
