javascript - 为什么这个函数组件在 setState 之后不重新渲染？

Question

如下所示，这个TextInput组件做了一个简单的工作：当输入的值为空时，隐藏标题，因为占位符显示相同的单词。

但是代码没有按预期工作。InputEvent确实运行，但重新分配activeStyle没有效果。

import React, {useState} from 'react';
import './TextInput.css';
import * as CSS from 'csstype';

type TextInputProps = {
    title: string
}

const TextInput: React.FC<TextInputProps> = ({title, children}) => {

    const hiddenStyle: CSS.Properties = {
        opacity: 0
    };
    const visibleStyle: CSS.Properties = {
        opacity: 1
    };
    let activeStyle = hiddenStyle

    const [rawTextInput, setRawTextInput] = useState("")

    const InputEvent = (e: React.FormEvent<HTMLInputElement>) => {
        const inputValue = e.currentTarget.value;
        setRawTextInput(inputValue)

        if(inputValue == ""){
            activeStyle = hiddenStyle
        } else {
            activeStyle = visibleStyle
        }

    }

    return (
        <div className="TextInput">
            <p 
                className="TextInputTitle"
                style={activeStyle}
            >
                {title}
            </p>
            <input 
                className="TextInputField" 
                type="text" 
                placeholder={title} 
                value={rawTextInput}
                onChange={InputEvent}
            />
            {/*<p className="TextInputHint"></p>*/}
        </div>
    );
}

export default TextInput
import React, {useState} from 'react';
import './TextInput.css';
import * as CSS from 'csstype';

type TextInputProps = {
    title: string
}

const TextInput: React.FC<TextInputProps> = ({title, children}) => {

    const hiddenStyle: CSS.Properties = {
        opacity: 0
    };
    const visibleStyle: CSS.Properties = {
        opacity: 1
    };
    let activeStyle = hiddenStyle

    const [rawTextInput, setRawTextInput] = useState("")

    const InputEvent = (e: React.FormEvent<HTMLInputElement>) => {
        const inputValue = e.currentTarget.value;
        setRawTextInput(inputValue)

        if(inputValue == ""){
            activeStyle = hiddenStyle
        } else {
            activeStyle = visibleStyle
        }

    }

    return (
        <div className="TextInput">
            <p 
                className="TextInputTitle"
                style={activeStyle}
            >
                {title}
            </p>
            <input 
                className="TextInputField" 
                type="text" 
                placeholder={title} 
                value={rawTextInput}
                onChange={InputEvent}
            />
            {/*<p className="TextInputHint"></p>*/}
        </div>
    );
}

export default TextInput

标签： javascriptreactjstypescriptcomponents

Answer 1

Local variable doesn't affect re-render.

let activeStyle = hiddenStyle    //local variable

You need to keep this in state and change using setter method.

const [activeStyle, setActiveStyle] = useState(hiddenStyle)

const InputEvent = (e: React.FormEvent<HTMLInputElement>) => {
    const inputValue = e.currentTarget.value;
    setRawTextInput(inputValue)

    if(inputValue == ""){
        setActiveStyle(hiddenStyle)
    } else {
        setActiveStyle(visibleStyle)
    }
}