Question

我的应用很简单：一个按钮，状态为toggleButton。在构造函数toggleButton中设置为默认值false。当我按下按钮时，应用程序将开始记录一些传感器并将console.log他们的数据记录到chrome调试器屏幕。

constructor(props) {
    super(props);
    this.state = {
      toggleButton: false
    };
}

recordSensors() {
    let toggleButton = !this.state.toggleButton;
    this.setState({ toggleButton });

    if (this.state.toggleButton) {
        // start & record some sensors data
    } else {
        // stop recording
    }
}

render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.toggleButton}
          onPress={() => this.recordSensors()}
        >
          <Text style={styles.buttonText}>
            {this.state.toggleButton ? 'Stop' : 'Start'}
          </Text>
        </TouchableOpacity>
        <Text>
          {this.state.toggleButton ? 'Recording...' : null}
        </Text>
      </View>
    );
  }

奇怪的是，第一次按下按钮时，其文本更改为Stop并显示Recording...文本，但应用程序没有记录传感器数据。当我再次按下按钮（第二次）时，它现在会记录。

但如果我将if (this.state.toggleButton)更改为if (toggleButton)，那么它可以正常工作。我不能再理解它的逻辑了。你们能帮忙吗？

Answer 1

您正在使用

 let toggleButton = !this.state.toggleButton;

toggleButton的反向值为this.state.toggleButton

并且，如果this.state.toggleButton是false，那么toggleButton将true作为其值。所以，你指定的条件在这里是完全不同的

 if (this.state.toggleButton)   //if(false)

当你做的时候

if(toggleButton)  //if(true)

因此，当this.state.toggleButton为false或反之亦然时，请注意这种情况

Answer 2

你的问题：

echo '<input type="text" name="Caption_htmlspecialchars" size=100 value="'.$Caption_htmlspecialchars.'" maxlength = 100 required /><br><br>';

修正：

onPress={() => this.recordSensors()}

这是你的逻辑：

在你的构造函数中：

onPress={() => this.recordSensors}

在渲染中：

toggleButton = false;

哪个电话：

onPress={() => this.recordSensors()}

所以现在当你点击你的按钮时，你需要第二次调用recordSensors（）：

//currently this.state.toggleButton == false;
let toggleButton = !this.state.toggleButton; // let toggleButton=true;
this.setState({ toggleButton }); // now state.toggleButton = true;

切换按钮不是第一次切换

2 个答案: