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')
);