实时反应本地更改输入值

时间:2019-09-12 10:36:42

标签: react-native react-native-android textinput

我是新来的本地人。我正在制作一个具有三个TextInputs的屏幕,当用户在第一个和第二个TextInput中键入数字时,在第三个输入上,第一和第二个输入的总和将显示

我正在尝试做,但是没用

this.state = {
      Length: 0,
      Piece1: 0,
      Piece2: 0,   
};
onPiece1(Piece1) {
    this.setState({ Piece1 });
  }
  onPiece2(Piece2) {
    this.setState({ Piece2 });
  }

onLength() {
    const { Length, Piece1, Piece2} = this.state;
    let piece1 = this.setState({ Piece1 });
    let piece2 = this.setState({ Piece2 });

    const Balance =
      Number(Length) -
      Number(piece1) +
      Number(piece2) 
    this.setState({ Length: Balance });
  }

<Block margin={[theme.sizes.base, 0]} padding={[10]}>
                      <Input
                        keyboardType="numeric"
                        label="Piece 1"
                        value={`${this.state.Piece1}`}
                        onChangeText={this.onPiece1}
                        style={[styles.input]}
                      />
                    </Block>
                    {/* piece 2 */}
                    <Block margin={[theme.sizes.base, 0]} padding={[10]}>
                      <Input
                        keyboardType="numeric"
                        label="Piece 2"
                        value={`${this.state.Piece2}`}
                        style={[styles.input]}
                        onChangeText={this.onPiece2}
                      />
                    </Block>
                  </Block>
<Block margin={[theme.sizes.base, 0]} padding={[10]}>
                      <Input
                        label="Balance"
                        selectTextOnFocus={false}
                        style={[styles.input]}
                        value={`${this.state.Length}`}
                        onChangeText={this.onLength}
                      />
                    </Block>

1 个答案:

答案 0 :(得分:0)

您的代码仅在您开始输入第三个文本输入时才起作用... 所以在onPiece1和onPiece2函数上都调用onLength函数