Question

我最近选择了React。关于受控和不受控制的组件的一些东西让我很困惑。

例如，我有一个像TextInput.tsx这样的自定义输入元素

const TextInput: React.StatelessComponent<TTextInputProps> =
    ({ name, value, placeHolder, className, onChange, onBlur, onKeyPress }) => {
    return (
        <span>
            <input
                className={className}
                placeholder={placeHolder}
                **value={value != null ? value : ""}**
                name={name}
                onChange={onChange}
                onBlur={onBlur}
                disabled={disabled}
                onKeyPress={onKeyPress} />
            {
                validationFailed &&
                <div className="validation-error text">
                    {"some error text"}
                </div>
            }
        </span>
    );
};

我使用像AnotherComponent.tsx这样的组件

private accountNameOnChangeHandler = (event: any): void => {
    return event;
}

const returnItem = <TextInput
            name={"newAccountId"}
            **value={""}**
            onChange={this.accountNameOnChangeHandler}
            placeHolder="Account"
            className={"new-account-input"} />;

我基本上试图将TextInput自定义组件渲染为不受控制的。因为我不想处理这个组件的onChange。我希望事件遵循其自然过程并自行更改基础HTML输入元素的值。

我必须发送什么值才能使TextInput不受控制？或者我应该直接在AnotherComponent.tsx中呈现HTML输入？

Answer 1

我必须发送什么值才能使TextInput不受控制？

为了使输入元素不受控制，只是不定义value属性，意味着你没有控制输入元素的值，无论用户输入什么类型，它都会反映到DOM中。

像这样：

<input
    className={className}
    placeholder={placeHolder}
    name={name}
    onChange={onChange}
    onBlur={onBlur}
    disabled={disabled}
    onKeyPress={onKeyPress} />

或者将value={undefined}分配给输入字段。

如果要设置输入字段的初始值，则将defaultValue属性与输入一起使用，并从父组件传递其值。

像这样：

<input
    defaultValue = {props.defaultValue}
    ....
/>

如何将输入字段呈现为不受控制：ReactJS

1 个答案: