Question

我有一个关于react的组件（在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>

Answer 1

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

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

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

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

onChange={fieldChangeHandler}
value={text}

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

获取TextField组件的值

1 个答案: