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。

在React中浏览器调整大小时删除文本输入

1 个答案: