Question

我已经创建了一个示例react-native app。这个应用程序只包括TextInput和一个Button

export default class App extends Component {
  state = {
    inputValue: "You can change me!"
  };

  _handleTextChange = inputValue => {
    this.setState({ inputValue });
  };

  _handleSelectionChange = (event) =>{
    this.setState({seleksi : event.nativeEvent.selection});
    console.log(event.nativeEvent.selection);
  }

  _handleButtonPress = () => {
    this.setState({inputValue : "Paijo tenan"});
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.inputValue}
          onChangeText={this._handleTextChange}
          **onSelectionChange={(event)=>this._handleSelectionChange(event)}**
          style={{ width: 200, height:200, padding: 8 }}
          multiline={true}
        />

        <Button
          title="Press me"
          onPress={this._handleButtonPress}
        />
      </View>
    );
  }
}

当我设置onSelectionChange道具时，按下Button后。 TextInput上的文本选择显示异常。

点击按钮之前，选择显示项目符号开始和结束

之后，选择不显示项目符号开始和结束

但是当我在TextInput上键入一些文本时，它可以用于选择。

如何在单击按钮后使用TextInput上的onSelectionChange道具进行选择？为什么会发生这种情况？如何调试？，我的代码看起来很好

我在这里创建了世博小吃https://snack.expo.io/rJ6VxW56x

Answer 1

我不完全确定这是不是你的意图......但是我找到了一个简单的解决方法，确保按下按钮后选择范围相同。

首先跟踪状态中的选择：

state = {
  inputValue: 'You can change me!',
  selection: {start: 0, end: 0},
};

在TextInput上使用selection道具：

selection={this.state.selection}

确保在_handleSelectionChange

中将选择保存到状态

_handleSelectionChange = (event) => {
  this.setState({ selection: event.nativeEvent.selection });
}

修改_handleButtonPress以在更新inputValue之前存储选择状态，并使用 hackish setTimeout在文本更改后恢复选择。超时的原因是给inputValue更新时间，这将触发我们想要忽略的_handleSelectionChange ...所以我们在文本更改后将其设置为之前的值，选择与之前相同的范围，你看到可拖动的项目符号

  _handleButtonPress = () => {
    const selectionBeforeChange = { start: this.state.selection.start, end: this.state.selection.end };
    this.setState({ inputValue : 'Paijo tenan' }, () => {
      setTimeout(() => {
        this.setState({ selection: selectionBeforeChange });
      }, 50);
    });
  };

我真的不喜欢在任何地方使用setTimeout，但这个解决方案可以根据您的需要工作。一个已知的问题是，如果新文本（按下按钮后）短于选择范围，则它将无法正确地迁移先前的选择。我确定您可以检查新值的长度，并将选择/缩短选择与有效选择长度进行比较，如果这是您的目标。

而且，正如用户Jaws所提到的......最好清楚将函数绑定到何处/何时。我喜欢在构造函数中绑定所有内容，以防止任何不必要的重新绑定/保持在一起。

  constructor(props) {
    super(props);
    this._handleButtonPress = this._handleButtonPress.bind(this);
    this._handleSelectionChange = this._handleSelectionChange.bind(this);
    this._handleTextChange = this._handleTextChange.bind(this);
  }

Answer 2

我终于解决了！像这样输入textinput值！

<TextInput ...>
    <Text>{this.state.inputValue}</Text>
</TextInput>

Answer 3

请稍作修改并尝试。

更改

        <StackLayout borderRadius="5px" borderColor="blue">         
            <Label class="body" [text]="'Description:  ' + product.Description"></Label>
            <Label class="body" [text]="'POS Description: ' + product.POSDescription"></Label>
            <Label class="body" [text]="'POS price:  R' + product.POSPrice"></Label>
            <Label class="body" [text]="'Stock On Hand:  ' + product.StockOnHand"></Label>
        </StackLayout>

到

_handleTextChange = inputValue => {
    this.setState({ inputValue });
  };

在更改TextInput的值后，无法更改所选文本

3 个答案: