Question

我需要将父级的通用对象的字段与子级绑定，然后让该子级对其进行更新。

ParentComponent应该使用ChildComponent的{{1}}字段作为值呈现item。然后子组件应该能够在父端更新此值。

email和item可以用于任何类型的对象，因此它们将被动态加载。

父组件

ChildComponent

子组件

interface State<Type> {
    item: Type;
}

export default class ParentComponent<Type> extends React.Component<
{},
State<Type>
> {
    constructor(props: {}) {
        super(props);
        this.state = { item: undefined };
    }

    handleInputChange = (event: any) => {
        console.log(event.currentTarget.name);
        console.log(event.currentTarget.value);

        this.setState({ !!UPDATE ITEM'S EMAIL!! }, () => {
            console.log(this.state.item);
        });
    };

    render() {
        return (
            <ChildComponent
                name="email"
                _handleChange={this.handleInputChange}
                value={ !!BIND ITEM'S EMAIL!! }
            />
        );
    }
}

测试通用类型

interface Props {
    name: string;
    value: string;
    _handleChange: any;
}

const ChildComponent = ({ name, value, _handleChange }: Props): JSX.Element => (
    <input
        type="text"
        name={name}
        value={value}
        onChange={_handleChange}
    />
);

export default ChildComponent;

应用

export default class TestType {
    email: string = ' blabla@.com';
}

您能帮我吗？

Answer 1

您快到了。尝试在ParentComponent的构造函数中添加此行

this.handleInputChange = this.handleInputChange.bind(this);

根据您的CodeSandBox进行以下更改

您必须像这样设置状态

 this.setState({ item: event.currentTarget.value }, () => {
  console.log("this.state.item", this.state.item);
});

，然后使用childComponent的值传递this.state.item而不是!!BIND ITEM'S EMAIL!!

在ReactJS中将父级的通用对象字段与子级绑定

1 个答案: