Reactjs 更新MKButton'；带文本'；状态变化时的价值

我是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 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

方法，将其封装在类中。这将允许您访问传递给类的

道具

：

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>
    );
  }
}

class AddPerson扩展组件{
静态导航选项={
tabBarLabel:“添加”，
tabBarIcon:（{tintColor}）=>(
)
};
shouldComponentUpdate（下一步，下一步状态）
{
return nextrops.toUpdate！=this.props.toUpdate；
}
getButtonLabel=（）=>{
如果（！this.props.toUpdate）
{
返回“添加”；
}
其他的
{
返回“更新”；
}
}
onAddButtonPress（）
{
常数newOrModifiedPerson={
名字：this.state.first_name，
姓氏：this.state.last_name，
电话：这个州的电话，
电子邮件：this.state.email，
公司：这个州的公司，
项目：this.state.project，
备注：this.state.notes
};
如果（！this.props.toUpdate）
{
this.props.createNewContact（newOrModifiedPerson）；
this.props.navigation.navigate（'PeopleList'）；
}
其他的
{
this.props.updateContact（newOrModifiedPerson）；
}
}
render（）{
返回(
{this.props.toUpdate？'Update Details'：'Add New Person'}
this.setState（{first_name}}/>
this.setState（{last_name}}/>
this.setState（{phone}}/>
this.setState（{email}}/>
this.setState（{company}}/>
this.setState（{project}}/>
this.setState（{notes}}/>
);
}
}

---

你看到这个方法现在在你的类中是怎样的了吗？这将使您能够访问

这个.props

，这是您在它之外不可能拥有的。

我发现上述问题唯一可行的方法是这一点-这需要更多的编写并与常规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>

{
log（'hi，升起的按钮！'）；
}}
>
凸起按钮

---

使用上述用法，可以在运行时更新

MKButton

的标签。但我怀疑是否有任何方法可以在运行时使用

.build（）

更新标签。对于如此流行的框架，真是遗憾。

.withText（getButtonLabel（））.build（）能够调用该方法。但是
props
是未定义的，因为方法和按钮在类括号外声明为
const
。我如何解决这个问题？你能发布你的完整文件和类定义吗？谢谢你的更新。我根据您的建议修改了代码-我还更新了与您共享的代码链接。AddButton仍在类文件之外声明，并且这样做时调用
.withText（{this.getButtonLabel（）}）.build（）
或
.withText（this.getButtonLabel（））.build（）
会引发错误，因为未定义方法。只有
.withText（this.getButtonLabel）.build（）
不会抛出错误，但也不会创建任何标签。我应该在上面的代码中给出一个更清晰的示例，但基本上，您需要将所有方法等放入类中，以便它们不会被封装。在类中移动AddButton声明会引发指向声明的编译器错误：。如果我删除
常量
或将
常量
替换为
静态
，则该错误不会出现，但会引发另一个错误
ReferenceError:AddButton未定义
，因为此用法
。
<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>