テキスト入力がブラウザで消去されました

Question

私のウェブサイトのブラウザのサイズを変更するときにReact Native Web/ReactJSでフォーム入力を保存する方法を知りたいと思っています。基本的には、デスクトップ、タブレット、電話の3つのバージョンがあります。ブラウザのサイズが変更されたときに同じテキストで再レンダリングするためにメッセージ領域に入力されたものはすべて欲しいものの、入力されたものはすべて消去されます。

私は以下のコードを持っています。ありがとう！

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); 
       }}/> 
     ) 
    } 
}) 

Answer 1

これがわかりました！ onChangeText関数に問題がありました。私がする必要があったのは、Messageにデフォルト値を追加してthis.props.messageに設定することだけでした。