首页 > 解决方案 > 在使用 t.form 进行本机反应时使用 setState 更新数据

问题描述

我想对我的应用程序进行更新,当值为 null 时,我有一个条件,提交按钮将被禁用。

但是我不能像下图那样完全删除它,它一直留下最后一个字母/数字

在此处输入图像描述

这是我的代码:

构造函数:

constructor(props){
        super(props);
        this.state = {
            buttonState: true,
            value: {}
        }
    }

我的改变:

onChange = () => {
        const value = this.refs.form.getValue();
        if(value) {
          this.setState({
              value,
              buttonState: true
            });
        }
        else{
            this.setState({
                buttonState: false
              });
        }
      }

这是我的渲染:

render(){
        const   { loading } = this.props,
                { form, value, buttonState } = this.state
        console.log(buttonState);

        return (
            <View>
                <ScrollView bounces={false}>
                <View style={styles.container_form}>
            <StatusBar backgroundColor={colors.primary} barStyle='light-content'/>
            
                    <View style={styles.form}>
                        {form&&<Form ref="form" type={form} 
                            options={options} value={value} 
                            onChange={value=>this.onChange({value})}
                        />}

                        
                    <KeyboardAwareScrollView/>
                    </View>
            </View>
            <View style={styles.container_button}>
            <Button 
                            loading={loading}
                            disabled={!buttonState}
                            onPress={this.update}
                            medium
                            containerViewStyle={styles.buttonContainer}
                            buttonStyle={[styles.button,buttonDefault]}
                            title={'SAVE'}
                            fontSize={normalize(13)}
                            {...textExtraBold}
                        />
            </View>
                </ScrollView>
            </View>
            
        )
    }

提前感谢您的帮助!

标签: react-native

解决方案


这可能会有所帮助

onChange = () => {
        .....
        if(value) {
          ....
        }
        else{
            this.setState({
                buttonState: false,
                value: {} // add this here and try
              });
        }
}

推荐阅读