其他分享
首页 > 其他分享> > React练习 3 :函数接受参数并弹出

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

 

标签:sector,city,const,练习,value,React,useState,import,并弹
来源: https://www.cnblogs.com/sx00xs/p/11824313.html