[英]Pass state from component to Modal?
I have a component and import it in specific screen, in this screen i have a button when clicks i open modal contain component it's a "recorder" so after i record voices i want to take this voice and save them into Parent screen as a state or something!我有一个组件并将其导入特定屏幕,在这个屏幕上我有一个按钮,当点击时我打开模式包含组件它是一个“录音机”所以在我录制声音后我想把这个声音保存到父屏幕中作为 state或者其他的东西!
in the recorder component, I save voices data into state?在录音机组件中,我将语音数据保存到 state 中? but how can i pass it to other parent screens??
但我怎样才能将它传递给其他父屏幕? so how can I handle it?
那么我该如何处理呢?
here is shots这是镜头
Parent Screen "after click add voice I show the modal"父屏幕“单击添加语音后我显示模态”
Here's a modal contain a recorder component这是一个包含记录器组件的模态
CODE代码
Component零件
" I pass data to PassDataToModal state inside componentDidMount "
“我在 componentDidMount 内将数据传递给 PassDataToModal state”
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {AudioRecorder, AudioUtils} from 'react-native-audio';
import Sound from 'react-native-sound';
import Icon from 'react-native-vector-icons/MaterialIcons';
class RecorderScreen extends Component {
state = {
PassDataToModal: null,
};
componentDidMount() {
AudioRecorder.requestAuthorization().then(isAuthorised => {
this.setState({hasPermission: isAuthorised});
AudioRecorder.onFinished = data => {
console.log('data', JSON.stringify(data));
this.setState({PassDataToModal: data});
};
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.controls}>
{this._renderPlayButton(() => {
this._play();
})}
{this._renderRecordButton(this.state.recording)}
{this._renderStopButton('Stop', () => {
this._stop().then(() => this.setState({currentTime: 0}));
})}
</View>
<Text style={styles.progressText}>{this.state.currentTime}s</Text>
</View>
);
}
}
export default RecorderScreen;
Parent Screen父屏幕
import Modal from 'react-native-modal';
import RecorderScreen from './Recorder';
class Order extends Component {
constructor(props) {
super(props);
this.state = {
isModalVisible: false,
};
}
toggleModal = () => {
this.setState({isModalVisible: !this.state.isModalVisible});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={this.toggleModal}
>
<Icon name="mic" color="#333" size={20} />
<Text style={{paddingHorizontal: 5}}>Add Voice</Text>
</TouchableOpacity>
<Modal
style={{margin: 0}}
isVisible={this.state.isModalVisible}
>
<View>
<TouchableOpacity onPress={this.toggleModal}>
<Icon name="close" color="#000" size={25} />
</TouchableOpacity>
<RecorderScreen /> // Component
</View>
</View>
)
}
}
In your parent component pass a function to your RecorderScreen
component that will send the necessary data up.在您的父组件中,将 function 传递给您的
RecorderScreen
组件,该组件将向上发送必要的数据。 Docs on lifting state up . 关于提升 state 的文档。
So in your parent you'd have something like:所以在你的父母中,你会有类似的东西:
setData = (data) => {
// Set this to whatever you need it to be named
this.setState({childData: data});
}
Then pass the function as a prop:然后将 function 作为道具传递:
<RecorderScreen setData={this.setData} />
And finally, call it in the child however needed (If I'm following the code something like this):最后,根据需要在孩子中调用它(如果我遵循这样的代码):
componentDidMount() {
AudioRecorder.requestAuthorization().then(isAuthorised => {
this.setState({hasPermission: isAuthorised});
AudioRecorder.onFinished = data => {
this.props.setData(data);
};
});
}
Then your parent component will have access to the child's data that you have lifted up.然后,您的父组件将有权访问您提升的子数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.