如何在不影响以前键入的文本的情况下更改TextInput样式本机反应

Question

[我正在尝试创建富文本编辑器，该富文本编辑器将具有诸如单击以加粗显示的选项，当我尝试将它们从状态更改为最终影响先前插入的文本时，如何在不影响先前内容的情况下实现此目的而又不影响先前的内容？>>

export default class App extends React.Component {
          constructor(props){
               super(props)
               this.state={
                      text:'',
                      inputStyles:{
                            fontWeight:'light'
                      }
               }
          }
        _Bold =()=>{
            this.setState({inputStyles:{
                  fontWeight:'bold'
            }})

        }

      render() {
        return(


               <View style={styles.container}>
                       <StatusBar backgroundColor="#24292e" barStyle="light-content" />

                       <TextInput  placeholder="Star to write"
                        style={this.state.inputStyles}
                      />

              <TouchableOpacity onPress={()=>this._Bold()}>
                    <Text>BOLD</Text>
              </TouchableOpacity>
               </View>



               ) 
          }
      }
    `

我正在尝试创建富文本编辑器，该富文本编辑器将具有诸如单击以加粗显示的选项，当我尝试将其内容从原来的状态更改为最终会影响...的情况时，如何在不影响以前的内容的情况下实现这一目标？

如果我理解正确，我认为您必须将TextInput更改如下：

  <TextInput 
    placeholder="Star to write"
    value={this.state.text}
    onChangeText={(text) => this.setState({text)}
    style={this.state.inputStyles}
  />

问题是，一旦文本被渲染，它就不会存储到状态中，它会丢失

Answer 1