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
        ),
   });

至于第二个问题，您正在尝试为常量分配新值。