獲取從文本輸入所選文本

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目前沒有富文本編輯器的功能，所以它是不可能的。