onchange 輸入不起作用 useState 在反應

Question

我正在嘗試為文本框輸入設置onChange ，但我無法弄清楚它為什么不起作用......我已經在處理程序 function 中記錄了 output 並且值似乎更新了。 問題是當我將它傳遞給輸入組件時，它仍然顯示一個空字符串。 不知道為什么？

我遇到的第二個問題是我嘗試解構輸入配置初始值，控制台產生一個錯誤，指出該值是只讀的。 誰能解釋為什么？ 此選項當前已被注釋掉。

請參閱下面的組件邏輯：

import React, { useState } from 'react';
import classes from './BioSection.css';
import Input from '../../UI/Input/Input';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCameraRetro, faUser } from '@fortawesome/free-solid-svg-icons';

const BioSection = () => {
    const [addingBio, setAddingBio] = useState(false);
    const [inputConfig, setInputConfig] = useState({
        elementType: 'textarea',
        elementConfig: {
            placeholder: 'Bio',
        },
        value: '',
        length: 0,
        validation: {
            required: true,
            minLength: 10,
            maxLength: 100,
        },
        valid: false,
    });

    const checkValidity = (value, rules) => {
        let isValid = true;

        if (rules.minLength) {
            isValid = value.length >= rules.minLength && isValid;
        }

        if (rules.maxLength) {
            isValid = value.length <= rules.maxLength && isValid;
        }

        return isValid;
    };

    const addBio = () => {
        setAddingBio(true);
    };

    const saveBio = () => {
        setAddingBio(!addingBio);
        //request POST http
    };

    const cancelBioUpdate = () => {
        setAddingBio(!addingBio);
    };

    const textAreaChangedHandler = (e) => {
        console.log(e.target.value);
        const copyOfInputConfig = inputConfig;
        copyOfInputConfig.value = e.target.value;
        copyOfInputConfig.length = e.target.value.length;
        copyOfInputConfig.valid = checkValidity(
            copyOfInputConfig.value.trim(),
            copyOfInputConfig.validation
        );
        console.log(copyOfInputConfig);

        // const { value, length, valid, validation } = copyOfInputConfig;
        // value = e.target.value;
        // value = e.target.value;
        // length = e.targer.value.length;
        // valid = checkValidity(copyOfInputConfig.value.trim(), validation);

        let formIsValid = true;
        for (let inputIdentifier in copyOfInputConfig) {
            formIsValid = copyOfInputConfig.valid && formIsValid;
        }
        setInputConfig(copyOfInputConfig);
    };

    return (
        <div className={classes.BioSection}>
            {addingBio ? (
                <div className={classes.UserBio}>
                    <Input
                        bioSection
                        key={inputConfig.elementType}
                        elementType={inputConfig.elementType}
                        elementConfig={inputConfig.elementConfig}
                        value={inputConfig.value}
                        valueLength={inputConfig.value.length}
                        invalid={!inputConfig.valid}
                        shouldValidate={inputConfig.validation}
                        maxCharacters={inputConfig.validation.maxLength}
                        changed={(e) => {
                            textAreaChangedHandler(e);
                        }}
                    />
                    <div className={classes.BioButtonHolder}>
                        <button onClick={cancelBioUpdate}>cancel</button>
                        <button onClick={saveBio}>save</button>
                    </div>
                </div>
            ) : (
                <div>
                    <span>add travel bio</span>
                    <button onClick={addBio}>add bio</button>
                </div>
            )}
        </div>
    );
};

export default BioSection;

Answer 1

為什么不直接這樣setState？？

  setInputConfig({
        ...inputConfig,
        value: e.target.value,
        length: e.target.value.length,
        valid: checkValidity(
            e.target.value.trim(),
            inputConfig.validation
        ),
   });

至於第二個問題，您正在嘗試為常量分配新值。