Question

我的根组件为：

const EnterMobileNumberPage: React.FC = () => {

    return (
        <div 
            className="Page" 
            id="enterMobileNumberPage"
        >
            <CardView>
                <p 
                    className="TitleLabel" 
                >
                    Please enter your mobile number
                </p>
                <input 
                    className="PlainInput" 
                    type="text" 
                    maxLength={10}
                    onChange={inputAction}
                />
                <FilledButton 
                    title="Next" 
                    action={buttonAction} 
                    invalid
                />
            </CardView>
        </div>
    );
}

其中CardView和FilledButton是我的自定义组件。 FilledButton的逻辑如下所示：

type FilledButtonProps = {
    title: string,
    bgcolor?: string,
    color?: string,
    invalid?: boolean,
    action?: ()=>void
}

const FilledButton: React.FC<FilledButtonProps> = (props) => {

    const [, updateState] = React.useState();
    const forceUpdate = React.useCallback(() => updateState({}), []);

    let backgroundColor: string | undefined

    if(props.bgcolor){
        backgroundColor = props.bgcolor
    }

    if(props.invalid === true){
        backgroundColor = "#bcbcbc"
    }

    const overrideStyle: CSS.Properties = {
        backgroundColor: backgroundColor,
        color: props.color
    } 

    return (
        <a 
            className="FilledButton" 
            onClick={props.action}
        >
            <div style={overrideStyle}>
                {props.title}
            </div>
        </a>

    );
}

在这里，我想听输入元素中的文本更改事件。我应该怎么写才能使inputAction有更新FilledButton的方式？

例如，当输入元素具有10位数字时，我可能想将FilledButton的{{1}}更改为invalid。

（由于我是个初学者，所以我没有介绍Redux）

Answer 1

由于要更新同级组件，所以唯一的方法是重新渲染父级组件，并将更新后的prop传递给同级组件，以便它也将更新。

const EnterMobileNumberPage: React.FC = () => {
    const [mobileVal, inputAction] = React.useState('');
    return (
        <div>
            <input 
                className="PlainInput" 
                type="text" 
                maxLength={10}
                onChange={inputAction} // Updating parent component state on change
            />
            <FilledButton 
                title="Next" 
                action={buttonAction} 
                invalid
                mobileLength={mobileVal.length} // New prop for filled button
            />
        </div>
   );
}

Answer 2

因此，如果您想通过<FilledButton />更新道具接收，则只需在触发action onChange函数时存储一个状态（也许叫inputAction），更新状态并将该状态传递给子组件的方式：

import React, { useState } from 'react';

const EnterMobileNumberPage: React.FC = () => {
    const [action, setAction] = React.useState('');

    const handleChange = e => {
      if (e && e.target && e.target.value) {
        setAction(e.target.value);
      }
    };

    return (
        <div 
            className="Page" 
            id="enterMobileNumberPage"
        >
            <CardView>
                <p className="TitleLabel" >
                    Please enter your mobile number
                </p>
                <input 
                    className="PlainInput" 
                    type="text" 
                    maxLength={10}
                    onChange={handleChange}
                />
                <FilledButton 
                    title="Next" 
                    action={buttonAction} 
                    invalid={action.length === 10}
                />
            </CardView>
        </div>
    );
}

然后，您将拥有一个action资产，可以用来阻止<FilledButton />并将其用作<input />值，希望对您有所帮助。

如何更新在JSX.Element内部创建的组件？

2 个答案: