Holen Sie sich den ausgewählten Text aus Texteingabe

Question

Angenommen, dies ist eine Komponente

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

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

Und ich tippte: „Große braune Augen“

Nun, wenn ich "Big" von der Texteingabe ausgewählt. Wie bekomme ich den ausgewählten Text-Eingabewert, so dass ich die "Big" in Big fett auf Knopfdruck ändern kann.

Answer 1

Sie können dies tun, indem OnSelectionChange und onChangeText Requisiten von TextInput- Verwendung:

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] 
    }); 
    }; 
} 

Was macht Auswahl fett, ich glaube, reagieren-native TextInput- derzeit nicht Rich-Text-Editor-Funktionen hat, so ist es nicht möglich, .