反应状态挂钩问题

debugcn 发表于 Dev

苏博吉特

我正在尝试使用状态挂钩来使onChange与material-ui一起正确处理错误文本。但是得到一个问题。我已附上控制台中出现的错误屏幕。

这是我的代码：

import React, { Component, useState } from 'react';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';

export const CreateForm = (props) => {
    const { containerClass } = props;
    let [dataAction, setDataAction] = useState({ errorNameText: 'Enter product name!' });
    let errorNameText = 'Enter the name!';

    const handleNameChange = (event) => {
        const name = event.target.value;
        if(name && name !== '') {
            setDataAction(prevState => {
                prevState.errorNameText = '';
            })
        }
    }
    return(
        <div className={containerClass}>
            <div>
                <TextField
                    className="product_nameField"
                    floatingLabelText="Product Name"
                    errorText={dataAction.errorNameText}
                    onChange={handleNameChange}
                />
            </div>
            <br/>
            <div>
                <TextField
                    className="product_priceField"
                    floatingLabelText="Product Price"
                />
            </div>
            <br/>
            <div>
                <TextField
                    className="product_infoField"
                    floatingLabelText="Product Info"
                />
            </div>
            <br/>
            <div>
                <RaisedButton label="Submit" primary={true} />
            </div>
        </div>
    );
}

我想我在这里缺少以正确方式使用状态挂钩的重要内容。任何帮助，将不胜感激。

D10S

更改

const handleNameChange = (event) => {
    const name = event.target.value;
    if(name && name !== '') {
        setDataAction(prevState => {
            prevState.errorNameText = '';
        })
    }
}

至

   const handleNameChange = (event) => {
        const name = event.target.value;
        if(name && name !== '') {
             setDataAction({ errorNameText: ''})   <------ CHANGED
        }
    }

请让我知道它是否解决了，然后我会详细说明。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。