是否可以发布和订阅事件(如 ionic )以进行组件通信。我拥有的两个组件没有关联(没有父组件和子组件)。 一个组件是具有按钮 Publish 的 header ,另一个组件是表单。我想要的是将事件从单击的按钮发送到表单以进行验证,例如字段正文不能为空之类的内容。
编辑: 我正在使用路由器通量。我的表单组件是NewPost,带有按钮发布的组件是ButtonsNewPost。该组件是父组件还是子组件?他们可以以某种方式进行交流吗?
<Scene
key="newPost"
component={NewPost}
hideNavBar={false}
renderRightButton={<ButtonsNewPost/>}
navBarButtonColor='#fff'
>
解决方案:
newPost.js
componentWillReceiveProps(newProps) {
let validationMessage;
if(newProps.validationBody) {
validationMessage = 'El campo descripción es requerido';
this.showToastValidation(validationMessage);
//without the next line the validation toast only appear once
this.props.validation_body(false);
}
}
const mapStateToProps = state => {
return {
validationBody: state.validationBody
}
}
const mapDispatchToProps = dispatch => {
return {
validation_body: (validationBody) =>
dispatch(validation_body(validationBody))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NewPost)
reducers/validationBody.js
export default (state = false, action) => {
switch(action.type) {
case 'validation_body':
return action.payload
default:
return state
}
}
reducer /index.js
import validationBody from './validationBody';
export default combineReducers({
validationBody: validationBody
})
actions/index.js
export const validation_body = (validationBody) => {
return {
type: 'validation_body',
payload: validationBody
}
}
buttonsNewPost.js
if (!window.description) {
this.props.validation_body(true);
return;
}
const mapDispatchToProps = dispatch => {
return {
validation_body: (validationBody) =>
dispatch(validation_body(validationBody)),
}
}
export default connect(null, mapDispatchToProps)(ButtonsNewPost)
最佳答案
您可以使用react-native-event-listeners库:
https://github.com/meinto/react-native-event-listeners
用法与 Ionic 事件类似:
import { EventRegister } from 'react-native-event-listeners'
/*
* RECEIVER COMPONENT
*/
class Receiver extends PureComponent {
constructor(props) {
super(props)
this.state = {
data: 'no data',
}
}
componentWillMount() {
this.listener = EventRegister.addEventListener('myCustomEvent', (data) => {
this.setState({
data,
})
})
}
componentWillUnmount() {
EventRegister.removeEventListener(this.listener)
}
render() {
return <Text>{this.state.data}</Text>
}
}
/*
* SENDER COMPONENT
*/
const Sender = (props) => (
<TouchableHighlight
onPress={() => {
EventRegister.emit('myCustomEvent', 'it works!!!')
})
><Text>Send Event</Text></TouchableHighlight>
)
关于javascript - 在 React Native 中发布和订阅事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52470586/