SegmentedControlIOS forceUpdate

时间:2015-06-17 06:06:17

标签: javascript reactjs react-native

我使用react-native的SegmentedControlIOS组件来选择三个到目前为止工作正常的值。但是,当我的应用程序加载数据时,我想确保用户无法更改与该控件关联的值,因为这会导致并发问题并中断更新。

因此,我决定处理控件值更改的方法仅在加载过程当前未激活时才调用通过属性提供的回调。否则,我调用this.forceUpdate()以重新呈现主机组件,其中包括设置分段控件的selectedIndex属性。但是,当调用this.forceUpdate时,所选索引不会更改。因此,我决定打印设置的值selectedIndex,始终显示初始(希望)索引。

您可以在下面看到用于显示分段控件的rendering方法的代码:

render: function()
{
    ...
    var indexBluetoothAutostart = 0;
    switch (this.props.data.BluetoothAutostartState)
    {
        case BluetoothAutostartState.OFF:
            indexBluetoothAutostart = 1;
            break;
        case BluetoothAutostartState.ON:
            indexBluetoothAutostart = 2;
            break;
        case BluetoothAutostartState.AUTO:
            indexBluetoothAutostart = 0;
            break;
    }
    console.log("index: " + indexBluetoothAutostart);
    ...
    return (
        ...
        <SegmentedControlIOS selectedIndex={indexBluetoothAutostart}
            momentary={false}
            onValueChange={(newValue) => this.changeBluetoothAutostartState(newValue)}
            values={[Localization.HomeFragment.BluetoothAutostartState.btnAuto, Localization.HomeFragment.BluetoothAutostartState.btnOff, Localization.HomeFragment.BluetoothAutostartState.btnOn]}/>
    );
}

最后,以下代码段显示了onValueChange处理程序:

changeBluetoothAutostartState: function(newValue)
{
    if (newValue === Localization.HomeFragment.BluetoothAutostartState.btnAuto)
    {
        if (this.props.bluetoothConnectionBusy === true)
        {
            Toast.display(Localization.BluetoothOperationInProgress.msgWaitForUploadToFinishToast);
            this.forceUpdate();
        }
        else
        {
            this.props.onBluetoothAutostartStateChange(BluetoothAutostartState.AUTO);
        }
    }
    // process the other two options
    ...
}

我感谢任何帮助。提前谢谢。

1 个答案:

答案 0 :(得分:0)

我只是将一个用'Date.now()'初始化的时间戳变量添加到类'状态,而不是调用'this.forceUpdate'我更新了状态的时间戳:

this.setState({ timestamp: Date.now() });