从文本输入中获取选中的文本

Question

假设这是一个组件

class Wysiwyg extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <View>
                <TextInput placeholder="Type here" />
            </View>
        )
    }    
}

AppRegistry.registerComponent('AwesomeProject', () => Wysiwyg)

然后我输入："Big brown eyes!"

现在，如果我从文本输入中选择 "Big"。如何获取选定的文本输入值，以便在按下按钮时将 "Big" 更改为 Big 粗体。

Answer 1

您可以利用 TextInput 的 onSelectionChange 和 onChangeText 属性来做到这一点：

export default class TextSelectionTest extends Component {

  state = {
    selection: [0,0],
    text: ''
  };

  render() {
    const {selection: [start, end], text} = this.state;
    const selected = text.substring(start, end);
    return (
      <View>
        <TextInput value={text} onSelectionChange={this.onSelectionChange} 
                   onChangeText={text => this.setState({text})}/>
        <Text>{`Selected chars ${start}-${end}: ${selected}`}</Text>
      </View>
    );
  }

  onSelectionChange = event => {
    const selection = event.nativeEvent.selection;
    this.setState({
      selection: [selection.start, selection.end]
    });
  };
}

关于选择加粗，我觉得react-native TextInput目前还没有富文本编辑器的功能，所以是做不到的。