如何在不影响以前键入的文本的情况下更改 TextInput 样式？答案

【问题标题】：How to change TextInput styles without affecting previous typed text react native如何在不影响以前键入的文本的情况下更改 TextInput 样式？
【发布时间】：2020-05-08 15:55:47
【问题描述】：

我正在尝试创建富文本编辑器，该编辑器将具有单击加粗等选项，当我尝试从状态更改它们最终影响以前插入的文本时，如何在不影响以前内容的情况下实现这一点`

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>



               ) 
          }
      }
    `

【问题讨论】：

标签： javascript node.js react-native textinput richtext

【解决方案1】：

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

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

问题是您没有将文本存储到状态中，一旦呈现它就会丢失

【讨论】：

让我试试这个看看
没错。当您定义 value={this.state.text} 时，textInput 将显示之前的书面文本。