英文:
React Native: How to pass params to parent component from child component prop
问题
我想创建一个高阶组件（HOC），当某个特定的键被按下时触发事件。当按下此键时，它应该提供一个事件给父组件。在这种情况下，该键是"@"
子组件 HOC
import React, { Component } from 'react';
const withMention = WrappedComponent => {
return class extends Component {
state = {
mentionStart: false,
textInput: '',
selection: 0,
};
handleOnKeyPress = key => {
if (key === '@') {
this.setState({ mentionStart: true });
}
};
render() {
const { onMentionStart } = this.props;
return (
<WrappedComponent
onChangeText={text => {
this.setState({ textInput: text });
}}
onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
onSelectionChange={event =>
this.setState({ selection: event.nativeEvent.selection })
}
onMentionStart={onMentionStart}
{...this.props}
/>
);
}
};
};
export default withMention;
父组件
const UserComment = withMention(TextInput);
<UserComment onMentionStart={(event) => console.log(event)} />
我知道实现是错误的，因为每当我在父组件中将一个函数赋给子组件的 onMentionStart 属性时，子组件的函数会被父组件覆盖。在这种情况下，如何创建一个自定义事件触发器来从子组件传递事件，以便父组件可以相应地使用它？
英文:
I want to create a HOC that have a event trigger when a certain key is pressed. When this key is pressed it should provide an event to the parent component. In this case, the key is "@".
Child HOC
import React, { Component } from 'react';
const withMention = WrappedComponent => {
return class extends Component {
state = {
mentionStart: false,
textInput: '',
selection: 0,
};
handleOnKeyPress = key => {
if (key === '@') {
this.setState({ mentionStart: true });
}
};
render() {
const { onMentionStart } = this.state;
return (
<WrappedComponent
onChangeText={text => {
this.setState({ textInput: text });
}}
onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
onSelectionChange={event =>
this.setState({ selection: event.nativeEvent.selection })
}
onMentionStart={onMentionStart}
{...this.props}
/>
);
}
};
};
export default withMention;
Parent component
const UserComment = withMention(TextInput);
<UserComment onMentionStart={(event) => console.log(event)} />
I know the implementation is wrong, because whenever I assign a function to onMentionStart prop of child component in parent, child's function is overridden by parent. In this case, how to create a custom event trigger from child component and pass event into it so that the parent can use it accordingly?
答案1
得分: 2
我实际上通过从高阶组件的 onMentionStart 属性中移除它来解决了这个问题，并将 onMentionStart 函数从父组件传递到子组件作为回调函数，在 onKeyPress 处理函数中处理了它。
import React, { Component } from 'react';
const withMention = WrappedComponent => {
return class extends Component {
state = {
mentionStart: false,
textInput: '',
selection: 0,
};
handleOnKeyPress = key => {
if (key === '@') {
this.setState({ mentionStart: true }, () =>
this.props.onMentionStart(this.state.mentionStart),
);
}
};
render() {
return (
<WrappedComponent
onChangeText={text => {
this.setState({ textInput: text });
}}
onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
onSelectionChange={event =>
this.setState({ selection: event.nativeEvent.selection })
}
{...this.props}
/>
);
}
};
};
export default withMention;
英文:
I actually solved it by removing onMentionStart prop from HOC and passed onMentionStart function from parent to child as a callback, handled it in onKeyPress handler function.
import React, { Component } from 'react';
const withMention = WrappedComponent => {
return class extends Component {
state = {
mentionStart: false,
textInput: '',
selection: 0,
};
handleOnKeyPress = key => {
if (key === '@') {
this.setState({ mentionStart: true }, () =>
this.props.onMentionStart(this.state.mentionStart),
);
}
};
render() {
return (
<WrappedComponent
onChangeText={text => {
this.setState({ textInput: text });
}}
onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
onSelectionChange={event =>
this.setState({ selection: event.nativeEvent.selection })
}
{...this.props}
/>
);
}
};
};
export default withMention;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论