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

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 的 invalid 更改为 false。

（我没有介绍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 /> 更新道具接收，你只需要在你的 inputAction onChange 函数被触发时存储一个状态（可能称之为 action），这样你就可以更新那个状态并且那个状态已经传递给你的子组件：

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 中创建的组件？

How to update components created inside a JSX.Element?

javascript

web-component

typescript

reactjs