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

我有一个根组件，如下所示：

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

在这里，我想听听输入元素中的文本更改事件。我应该写些什么，以便

inputation

能够更新

FilledButton

例如，当输入元素有10位数字时，我可能想将

FilledButton

的

invalid

更改为

false

---

（我没有介绍Redux，因为我是一个初学者）

既然您想更新同级组件，唯一的方法就是重新渲染父组件并将更新的道具传递给同级组件，这样它也会更新

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

const EnterMobileNumberPage:React.FC=（）=>{
常量[mobileVal，inputAction]=React.useState（“”）；
返回(
);
}

因此，如果您想通过

更新props receibe，您只需要在

输入操作

触发时存储一个状态（可能称为

操作

），这样您就可以更新该状态，并将该状态传递给您的子组件：

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

import React，{useState}来自“React”；
常量EnterMobileNumberPage:React.FC=（）=>{
常量[action，setAction]=React.useState（“”）；
常量handleChange=e=>{
if（e&&e.target&&e.target.value）{
设置动作（如目标值）；
}
};
返回(

请输入您的手机号码

);
} 

---

然后，您将有一个

操作

属性，您可以使用它来阻止

，并将其用作

值，希望这有帮助。

有意义。现在试一试。

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