react获取input框的值

最新推荐文章于 2025-06-10 11:54:05 发布

原创最新推荐文章于 2025-06-10 11:54:05 发布 · 3.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #js

收录于

react 专栏收录该内容

1 篇文章

订阅专栏

在React应用开发中，通常需要获取input元素的值并进行验证。可以通过为input添加onchange事件监听器，在事件处理函数中更新状态来获取输入值。例如，设置一个onchange事件处理函数inputChange，用于更新状态变量reason的值。同时，可以设定一个按钮点击事件，如rebut，用来改变提示信息的状态，比如将提示元素的display样式从none变为block。

react获取input框的值
在开发中，我们比较常见的需要获取input框的值或者对input框的值判断是否为空，空的话给出提示

首先在input框添加一个onchange事件

<TextArea type="text"  rows={4} value={reason} onChange={inputChange}/>

inputChange里去更新reason的值，reason是input框里的内容

function inputChange(e){
        dispatch({
            type:'buyBackManage/updateState',
            payload:{
                reason:e.target.value
            },
        });
    }

给按钮一个点击事件

<Button type="primary" size={'large'} onClick={()=>rebut(reason)}>驳回</Button>

rebut是去更改某个变量的值，我这里是修改rebutTip的值，由原来的none变成block

function rebut(reason){
        console.log(reason)
        if(reason.length===0)
        {
            dispatch({
                type:'buyBackManage/updateState',
                payload:{
                    rebutTip:'block'
                },
            });
        }
        console.log('123')
    }

上面的reason和rebutTip一开始在models中设定了初始值