状态更改时更新MKButton 'withText‘值
状态更改时更新MKButton 'withText‘值
提问于 2018-06-28 14:27:48
我是React Native的新手，正在开发一个实验性的应用程序，其中我使用React Native Material Kit中的MKButton。
基于我有限的知识，我用以下方式构建了MKButton：
const AddButton = MKButton.coloredButton()
.withText('ADD').build();
class AddUpdateUser extends Component<Props>
{
....
render() {
return (
<View style={styles.addButton}>
<AddButton onPress={this.onButtonPress.bind(this)}/>
</View>
);
}上面的效果很好。我还想根据状态字段更新该按钮的标签-我尝试了以下方法，但都不起作用：
const AddButton = MKButton.coloredButton()
.withText(getButtonLabel).build();
const getButtonLabel = () =>
{
if (!this.props.updateUser)
{
return 'ADD';
}
else
{
return 'UPDATE';
}
}谢谢!
回答 2
Stack Overflow用户
发布于 2018-06-28 18:11:44
const getButtonLabel = () =>
{
if (!this.props.updateUser)
{
return 'ADD';
}
else
{
return 'UPDATE';
}
}
const AddButton = MKButton.coloredButton()
.withText(getButtonLabel()).build();最佳实践是首先定义getButtonLabel，但我认为它不适合您的原因是getButtonLabel被定义为一个函数，所以您需要在后面加上括号。您可能还需要为JSX编译器使用大括号，但如果不尝试，我就不能100%确定(例如：.withText({getButtonLabel()}).build();)
编辑。现在我们已经看过你的完整文件了，看起来你还没有在类定义中添加方法。因此，让我们将getButtonLabel方法移动到类中封装。这将允许您访问传递给类的props：
class AddPerson extends Component {
static navigationOptions = {
tabBarLabel: 'Add',
tabBarIcon: ({tintColor}) => (
<Icon name={'plus'} size={75} style={{color: tintColor}} />
)
};
shouldComponentUpdate(nextProps, nextState)
{
return nextProps.toUpdate != this.props.toUpdate;
}
getButtonLabel = () => {
if (!this.props.toUpdate)
{
return 'ADD';
}
else
{
return 'UPDATE';
}
}
onAddButtonPress()
{
const newOrModifiedPerson = {
first_name: this.state.first_name,
last_name: this.state.last_name,
phone: this.state.phone,
email: this.state.email,
company: this.state.company,
project: this.state.project,
notes: this.state.notes
};
if (!this.props.toUpdate)
{
this.props.createNewContact(newOrModifiedPerson);
this.props.navigation.navigate('PeopleList');
}
else
{
this.props.updateContact(newOrModifiedPerson);
}
}
render() {
return (
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.container}>
<Text>{this.props.toUpdate ? 'Update Details' : 'Add New Person'}</Text>
<MKTextField textInputStyle={styles.fieldStyles}
placeholder={'First Name'} value={this.props.first_name}
tintColor={MKColor.Teal}
onChangeText={first_name => this.setState({first_name})}/>
<MKTextField textInputStyle={styles.fieldStyles}
placeholder={'Last Name'}
tintColor={MKColor.Teal}
onChangeText={last_name => this.setState({last_name})}/>
<MKTextField textInputStyle={styles.fieldStyles}
placeholder={'Phone Number'}
tintColor={MKColor.Teal}
onChangeText={phone => this.setState({phone})}/>
<MKTextField textInputStyle={styles.fieldStyles}
placeholder={'Email'}
tintColor={MKColor.Teal}
onChangeText={email => this.setState({email})}/>
<MKTextField textInputStyle={styles.fieldStyles}
placeholder={'Company'}
tintColor={MKColor.Teal}
onChangeText={company => this.setState({company})}/>
<MKTextField textInputStyle={styles.fieldStyles}
placeholder={'Project'}
tintColor={MKColor.Teal}
onChangeText={project => this.setState({project})}/>
<MKTextField textInputStyle={styles.fieldStyles}
placeholder={'Notes'}
tintColor={MKColor.Teal}
onChangeText={notes => this.setState({notes})}/>
<View style={styles.addButton}>
<AddButton onPress={this.onAddButtonPress.bind(this)}/>
</View>
</View>
</ScrollView>
);
}
}所以你看到这个方法现在是如何在你的类中的了吧？这将使您能够访问this.props，这是您在它之外所不具备的。
Stack Overflow用户
发布于 2018-07-10 15:13:07
对于上面的问题，我发现唯一可行的事情就是这样--这需要更多的编写，并与常规的CSS匹配：
<MKButton
backgroundColor={MKColor.Teal}
shadowRadius={2}
shadowOffset={{width:0, height:2}}
shadowOpacity={.7}
shadowColor="black"
onPress={() => {
console.log('hi, raised button!');
}}
>
<Text pointerEvents="none"
style={{color: 'white', fontWeight: 'bold',}}>
RAISED BUTTON
</Text>
</MKButton>使用上面的用法可以在运行时更新MKButton的标签，但我怀疑是否有任何方法可以使用.build()在运行时更新标签，对于如此流行的框架来说是多么遗憾。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51076037
复制相关文章
相似问题
腾讯云开发者
