时间戳

首页 > 解决方案 > React - 在单选按钮组件更改时，更新文本框组件状态

reactjs - React - 在单选按钮组件更改时，更新文本框组件状态

问题描述

我有 3 个组件。名为“XYZ”的主组件，其中包含名为“RadioButton”和“Textbox”的其他 2 个组件。我需要在 RadioButton 组件更改时更新 Textbox 组件的状态（将值设置为 500）。下面是我的代码。我是 React 开发的新手。任何帮助都将不胜感激！

主要组件 - XYZ.tsx

const XYZ = (props) => {
    let lossCapacityValues = [
        { value: "Average", text: "Average" },
        { value: "Medium", text: "Medium" }
    ];

    const lossCapacityChange = (event) => {
        let ele = $(event.target);
    };

    return (
        <div className="mel-box">
            <RadioButton groupName="radio-loss-type" selectedValue="2" items={lossCapacityValues} onChange={lossCapacityChange} />
            <TextBox value="1000" />
        </div>
    )
};

export default XYZ;

子组件 - 1- RadioButton.tsx

const RadioButton = (props) => {

    const onChange = (event) => {
        props.onChange && props.onChange(event);
    }

    return (
        <div>
            {
                props.items.map((i: { "text": string, "value": string }, index: number) => {
                    return (
                        <div key={index} className="radiobutton-option-div">
                            <input
                                className="radio-custom"
                                type="radio"
                                name={props.groupName}
                                value={i.value}
                                defaultChecked={i.value === props.selectedValue}
                                onChange={onChange}
                            />
                            <label className="radio-custom-label">
                                <span className="radio-custom-text">{i.text}</span>
                            </label>
                        </div>
                    )
                })
            }
        </div>
    );
};

export default RadioButton;

子组件 - 2- TextBox.tsx

const TextBox = (props) => { 
    const [state, setState] = React.useState({
        value: props.value
    });

    const handleChange = (evt) => {
        setState({ value: evt.target.value });
    };

    return (
        <React.Fragment>
            <div className="input-text">
                <input
                    type="text"
                    value={state.value}
                    onChange={handleChange}
                />
            </div>
        </React.Fragment>
    )

};

export default TextBox;

标签： reactjscomponentsreact-componentreact-state-managementreact-state

解决方案

这可以通过将状态 up从 TextBox 组件提升到 XZY 组件来完成。

工作演示

在 XYZ 中，放置文本状态处理程序：

const XYZ = (props) => {

    const [textState, setTextState] = React.useState({
        value: 1000
    });

    const handleTextChange = (evt) => {
        setTextState({ value: evt.target.value });
    };

    ....
    ....

};

将它们作为道具传递：

<TextBox value={textState.value} onChange={handleTextChange} />

更改您的输入以使用它们：

<input
    type="text"
    value={props.value}
    onChange={props.onChange}
/>

在您的 XYZ 中，您可以检查选定的单选值并相应地设置文本状态。

const lossCapacityChange = (event) => {
    //let ele = $(event.target);
    if(event.target.value == 'Average'){
        setTextState({ value: 500 });
    }
};

旁注：除非有充分的理由，否则应避免在 React 中使用 jQuery。React 使用一个虚拟 DOM，它会受到 jQuery 使用的影响。

推荐阅读