文本輸入在瀏覽器中被擦除在React中調整大小

我在我的智慧結尾嘗試瞭解如何在爲我的網站調整瀏覽器大小時在React Native Web/ReactJS中保存表單輸入。基本上，我有3個版本的網站：桌面，平板電腦和手機。我希望在瀏覽器大小發生變化時將任何已輸入消息區域的內容重新呈現爲相同的文本，但相反，它只是擦除輸入的內容。文本輸入在瀏覽器中被擦除在React中調整大小

我在下面有下面的代碼。謝謝！

var Support = React.createClass({ 
    getInitialState: function() { 
     return { 
      windowWidth: window.innerWidth, 
      message: ''}; 
    }, 

    handleResize: function(e) { 
     this.setState({windowWidth: window.innerWidth, message: this.state.message}); 
    }, 

    componentDidMount: function() { 
     window.addEventListener('resize', this.handleResize); 
    }, 

    componentWillUnmount: function() { 
     window.removeEventListener('resize', this.handleResize); 
    }, 
    saveMsg: function(text) { 
     this.setState({message: text}) 
    }, 

    _checkScreenSize: function(e) { 
     if (this.state.windowWidth > 774) { 
      return <Desktop message={this.state.message} saveMsg={this.saveMsg}/> 
     } 
     else if (this.state.windowWidth > 596) { 
      return <Tablet message={this.state.message} saveMsg={this.saveMsg}/> 
     } 
     else { 
      return <Phone message={this.state.message} saveMsg={this.saveMsg}/> 
     } 
    }, 

    render() { 
     return (
      <View style={{flex:1}}> 
      <NavBar/> 
       <ScrollView style={{flex:1}}> 
        <View> 
         <TitleBar name={'How Can We Help You?'} image={homeImage} windowWidth={this.state.windowWidth}/> 
         {this._checkScreenSize()} 
         <Footer/> 
        </View> 
       </ScrollView> 
      </View> 

     ) 
    } 
}) 

var Desktop = React.createClass({ 
    render() { 
     var sizes={inputPrompt: 15, input: 18} 
     return (
      <View style={[contentStyle.contentContainer, {marginLeft: 60, marginRight: 60}]}> 
       <ContactForm size={sizes} message={this.props.message} saveMsg={this.props.saveMsg}/> 
      </View> 
     ) 
    } 
}) 

var Tablet = React.createClass({ 
    render() { 
     var sizes={inputPrompt: 13, input: 15} 
     return (
      <View style={[contentStyle.contentContainer, {marginLeft: 30, marginRight: 30}]}> 
       <ContactForm size={sizes} message={this.props.message} saveMsg={this.props.saveMsg}/> 
      </View> 
     ) 
    } 
}) 

var Phone = React.createClass({ 
    render() { 
     var sizes={inputPrompt: 11, input: 13} 
     return (
      <View style={[contentStyle.contentContainer, {marginLeft: 10, marginRight: 10}]}> 
       <ContactForm size={sizes} message={this.props.message} saveMsg={this.props.saveMsg}/> 
      </View> 
     ) 
    } 
}) 

var ContactForm = React.createClass({ 
    render() { 
     return (
       <View style={contentStyle.contentContainer}> 
         <InputPrompt prompt={'Message*:'} size={this.props.size.inputPrompt}/> 
         <Message message={this.props.message} saveMsg={this.props.saveMsg}/> 
        </View> 

     ) 
    } 
}) 

var Message = React.createClass({ 
    render() { 
     return (
      <TextInput style={[styles.multiLineInput, GenerateFont(this.props.size, '#1C1C1C')]} 
       multiline = {true} 
       numberOfLines = {4} 
       message={this.props.message} 
       onChangeText={(text) => {this.props.saveMsg(text); 
       }}/> 
     ) 
    } 
})

來源

2016-09-12 Jessie Richardson

另外，值得注意的是，當我在控制檯中測試打印件時，消息被保存在支持中，並準確地傳遞迴消息呈現框，這不是在瀏覽器中呈現。 –

想通了！問題在於onChangeText函數。我需要做的只是在Message中添加一個默認值並將其設置爲this.props.message。

來源

2016-09-12 19:26:32

文本輸入在瀏覽器中被擦除在React中調整大小

回答

相關問題