Question

假设这是一个组件

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

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

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

现在如果我从文本输入中选择“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目前没有丰富的文本编辑器功能，所以不可能。

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

1 个答案: