1

これがコンポーネントであるとします。

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

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

そして、「大きな茶色の目！」と入力しました。

テキスト入力から「Big」を選択した場合。ボタンを押すと「ビッグ」をビッグボールドに変更できるように、選択したテキスト入力値を取得するにはどうすればよいですか。

4

1 に答える 1

2

これを行うには、TextInput の onSelectionChange および onChangeText props を利用します。

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 にはリッチ テキスト エディター機能がないため、不可能だと思います。

于 2016-08-03T10:56:32.897 に答える