React练习 3 :函数接受参数并弹出
需求:分别输入城市名称和区名称后,点击按钮,弹出所传入的城市和区名称。
解析:
1一个组件,使用useState分别设置 city, sector 2 个 state
2 使用input,将value绑定state,绑定onChange事件
import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function TransArgument(props){ const [city,setCity]=useState('北京市'); const [sector,setSector]=useState('朝阳区'); const handleTrans=function(){ alert(city); alert(sector); } return( <> <p><input type="text" value={city} onChange={(e)=>setCity(e.target.value)} /></p> <p><input type="text" value={sector} onChange={(e)=>setSector(e.target.value)} /></p> <p><button onClick={()=>handleTrans(city,sector)}>传参</button></p> </> ); } ReactDOM.render( <TransArgument/>, document.getElementById('root') );