时间戳

首页 > 解决方案 > 获取 TextField 组件的值

javascript - 获取 TextField 组件的值

问题描述

我有一个反应组件（在materialui的帮助下）：

export default function AddToDo() {


    const classes = useStyles();
    return (
        <div style={{
            display: "flex"
        }}>
            <TextField className={classes.textField} label="Add todo"></TextField>
            <Button variant="contained" >Submit</Button>
        </div>
    )

}

基本上它是一个文本框和一个按钮。当按下按钮时，我想调用一个名为 addNew(param1) 的方法（在我展示的代码上方声明）。我希望 param1 是用户在文本字段中引入的值。我怎样才能做到这一点？基本上是这样的：

<Button onclick=addNew(value inside the textfield) variant="contained" >Submit</Button>

标签： javascriptreactjsmaterial-ui

解决方案

您将需要一个状态来存储字段的值和一个回调来设置值：

const [text, setText] = React.useState("")

const fieldChangeHandler = React.useCallback((event) => setText(event.currentTarget.value))

然后将这些属性添加到 TextField 组件：

onChange={fieldChangeHandler}
value={text}

然后该值将存储在text变量中

推荐阅读