Question

大家好，我正在一个项目中工作，使用react hooks。当我尝试使用useState来处理来自字段的更新时，我收到一条错误消息。

我正在定义状态，就像：

const [searchText, setSearchText]  = useState('');

我正在尝试定义一个方法，该方法负责更改textField的值：

const handleSearchTextChange = event => {
        console.log("debug :" + event.target.value + "  ")
        setSearchText(event.target.vale)
    }

我遇到的问题是：

警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控状态切换到非受控状态（反之亦然）。在组件的生命周期中决定使用受控还是不受控制的输入元素。

我试图解决此问题，将状态常量定义为：

const [searchText, setSearchText]  = useState({
   value: ''
});

但是问题是相同的。

我的组件的代码是：

import React, { useState } from 'react';
import { Typography, Container, Grid, Card, TextField, Button } from '@material-ui/core';
import styles from './styles'

export default () => { 
    const [searchText, setSearchText]  = useState('');
    const classes = styles()
    const handleSearchTextChange = event => {
        console.log("debug :" + event.target.value + "  ")
        setSearchText(event.target.vale)
    }
    const handleCleanTextClick = event => {
        console.log("working 1")
    }
    const handleSearchTetxClick = event => {
        console.log("working 2")
    }
    return (
    <Container className={classes.container}> 
        <Card className ={classes.cardContainer}>
            <Grid container className={classes.titleGridContainer}>
                <Grid>
                    <Typography className={classes.title}>Welcome</Typography>
                </Grid>
                <Grid>
                    <label>Icon</label>
                </Grid>

            </Grid>
            <TextField
                value={searchText}
                placeholder="Buscar..."
                onChange={handleSearchTextChange}>
                className={classes.textFieldSearch}
            </TextField>
            <Grid className={classes.buttonsContainer}>
                <Button variant='contained' onClick={handleCleanTextClick}>Clean</Button>
                <Button className={classes.searchButton} variant='contained' color='primary' size='large' onClick={handleSearchTetxClick}>Search</Button>
            </Grid>
        </Card>

    </Container>)
}

挂钩输入元素不应从受控切换为不受控制（反之亦然）

0 个答案: