React Native, как передать this.setState изменение родительского
Я новичок в React Native. Я делаю пример приложения, в котором пользователь может войти и зарегистрироваться для новой учетной записи.
У меня есть два класса React,
Один из них - основной класс index.ios.js и другой класс, называемый register.js. В классе индекса я говорю, что если регистр переменной является истинным, отобразите экран регистра.
В классе register.js я пытаюсь установить регистр переменной в false с помощью this.setState({register: false}), но это не вызывает re-рендеринг родителя (index.ios.js). Является ли метод супер (состояние) или что-то подобное, что мне не хватает? Я считаю, что родительское состояние не получает значения обновленной переменной регистра.
Вот мои классы:
Render внутри index.ios.js:
render: function() {
if(this.state.register) {
return this.renderRegisterScreen();
}
else if (this.state.loggedIn) {
return this.userLoggedIn();
}
else {
return this.renderLoginScreen();
}
}
Register.js:
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
TextInput,
} = React;
var Register = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.rafitoImage}>
<Image source={require('./logo.png')}></Image>
<Text style={styles.slogan}>Eliminate the need to wait!</Text>
</View>
<View style={styles.bottomSection}>
<View style={styles.username}>
<View style={styles.inputBorder}>
<TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#f1c40f' onPress={this.register}>
<Text style={styles.buttonText}>Register</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
underlayColor='#ffffff'>
<Text style={styles.signUpText}>Already A Member </Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.copyright}>
</View>
</View>
);
},
resetToLogin: function() {
this.setState({
register: false //I want this to re render the home screen with the variable register as false
});
}
});
var styles = StyleSheet.create({
container: {
flex : 1
},
bottomSection: {
flex: 5,
flexDirection: 'row'
},
button: {
height: 36,
backgroundColor: '#32c5d2',
justifyContent: 'center',
marginTop: 20
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
signUpText: {
color: '#3598dc'
},
signUp: {
alignItems: 'flex-end',
marginTop: 10,
},
username: {
flex: 1,
padding: 5
},
rafitoImage: {
flex: 3,
justifyContent: 'center',
alignItems: 'center',
},
copyright: {
alignItems: 'center'
},
usernameInput: {
height: 36,
marginTop: 10,
marginBottom: 10,
fontSize: 18,
padding: 5
},
copyrightText: {
color: '#cccccc',
fontSize: 12
},
inputBorder: {
borderBottomWidth: 1,
borderBottomColor: '#ececec'
},
slogan: {
color: '#3598dc'
}
});
module.exports = Register;
Попытка 1
В соответствии с ответом я добавил это в свой index.ios.js
renderRegisterScreen: function() {
return (
<Register login={this.login}/>
)
}
И я добавил это в свой register.js
<TouchableHighlight style={styles.signUp} onPress={this.props.login}
underlayColor='#ffffff'>
<Text style={styles.signUpText}>Already A Member </Text>
</TouchableHighlight>
Но по какой-то причине он больше не входит в экран регистрации, он запускает функцию входа в систему, как только отображает экран регистра. Что мне сейчас не хватает? Пожалуйста, порекомендуйте.
Спасибо
Обновление
Это работает, когда я пропускаю зарегистрированный как свойство, но не тогда, когда я этого не делаю. Я хотел бы понять, почему, если кто-то может это опубликовать.
Спасибо
Ответы
Ответ 1
Вы можете передать функцию вниз ребенку в качестве реквизита, а затем установить состояние родителя из этого дочернего элемента.
Родительский компонент:
var Parent = React.createClass({
getInitialState() {
return {
registered: false
}
},
register(){
console.log("logging in... ");
this.setState({
registered: true
});
},
render: function() {
return (
<View style={styles.container}>
<Child register={this.register.bind(this)} registered={this.state.registered} />
{this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
<Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
</View>}
</View>
);
}
});
Детский компонент:
var Child = React.createClass({
render: function() {
return(
<View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
<TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
{this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
</TouchableHighlight>
</View>
)
}
})
Ответ 2
Вот более мощное решение. Это позволит дочернему компоненту изменить любую переменную состояния в родительском элементе.
Родительский компонент:
render: function() {
return (
...
<Child setParentState={newState=>this.setState(newState)} />
...
);
}
//Обратите внимание на setState()
Детский компонент:
this.props.setParentState({registered: true})
Ответ 3
Почему моя попытка была неудачной, потому что я использовал
onPress={this.props.login}
Это должно быть
onPress={()=>this.props.login}
из-за этой ошибки моя функция onPress будет выполняться сразу же после нажатия кнопки. Я не знаю, почему это происходит, но я знаю, какова была моя ошибка.