获取从文本输入所选文本

Question

假设这是一个分量

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

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

我打字：“棕色的大眼睛”

现在，如果我从文本输入中选择“大”。如何获得选定的文本输入值，以便我可以按下按钮将“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] 
    }); 
    }; 
} 

至于做选择，大胆的，我觉得反应母语的TextInput目前没有富文本编辑器的功能，所以它是不可能的。