Question

我有以下代码，它基本上接受一些基本输入，并且当单击“提交”按钮时，用户会收到警报通知，状态会通过onChange事件不断更新。我想知道的是我能以某种方式将检索到的数据传递到事件处理程序中的另一个组件以提交按钮（我称为handleFormSubmit）吗？我最近看到react有了一个叫做“ context”的东西……也许这是最好的选择？请教？：）

class Form extends Component {

    constructor(props) {
        super(props)

        this.state = {
             username: '',
             comments: '',
             topic: 'react'
        }

        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handleCommentsChange = this.handleCommentsChange.bind(this);
        this.handleTopicChange = this.handleTopicChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleUsernameChange(event){
        this.setState({
            username: event.target.value
        },
        () =>{
            console.log(this.state.username)
        })
    }

    handleCommentsChange(event){
        this.setState({
            comments: event.target.value
        },
        () =>{
            console.log(this.state.comments)
        })
    }

    handleTopicChange(event){
        this.setState({
            topic: event.target.value
        },
        () =>{
            console.log(this.state.topic)
        })
    }

    handleFormSubmit(event){
        event.preventDefault();

        alert(`${this.state.username} ${this.state.comments} ${this.state.topic}`);
    }

    render() {
        return (
            <form onSubmit={this.handleFormSubmit}>
                <div>
                    <label>Username</label>
                    <input type='text' value={this.state.username} onChange={this.handleUsernameChange}/>
                </div>
                <div>
                    <textarea value={this.state.comments} onChange={this.handleCommentsChange}></textarea>
                </div>
                <div>
                    <select value={this.state.topic} onChange={this.handleTopicChange}>
                        <option value="react">React</option>
                        <option value="angular">Angular</option>
                        <option value="vue">Vue</option>
                    </select>
                </div>

                <button>Submit</button>
            </form>
        )
    }
}

Answer 1

大家好，我进行了一些更改并使其正常工作，添加了名为dataSubmitted的额外状态属性，将其设置为false，然后仅在我提交数据后才允许其渲染子级（我称为AcceptFormData）并将状态属性作为prop 。我不知道这是否是一个好方法，但是它可以正常工作并且没有控制台错误。

class Form extends Component {

    constructor(props) {
        super(props)

        this.state = {
             username: '',
             comments: '',
             topic: 'react',
             dataSubmitted: false
        }

        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handleCommentsChange = this.handleCommentsChange.bind(this);
        this.handleTopicChange = this.handleTopicChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleUsernameChange(event){
        this.setState({
            username: event.target.value
        },
        () =>{
            console.log(this.state.username)
        })
    }

    handleCommentsChange(event){
        this.setState({
            comments: event.target.value
        },
        () =>{
            console.log(this.state.comments)
        })
    }

    handleTopicChange(event){
        this.setState({
            topic: event.target.value
        },
        () =>{
            console.log(this.state.topic)
        })
    }

    handleFormSubmit(event){
        event.preventDefault();

        this.setState({
            dataSubmitted: true
        })
    }

    render() {
        if(this.state.dataSubmitted === false){
            return (
                <form onSubmit={this.handleFormSubmit}>
                    <div>
                        <label>Username</label>
                        <input type='text' value={this.state.username} onChange={this.handleUsernameChange}/>
                    </div>
                    <div>
                        <textarea value={this.state.comments} onChange={this.handleCommentsChange}></textarea>
                    </div>
                    <div>
                        <select value={this.state.topic} onChange={this.handleTopicChange}>
                            <option value="react">React</option>
                            <option value="angular">Angular</option>
                            <option value="vue">Vue</option>
                        </select>
                    </div>
                    <button>Submit</button>
                </form>
            )
        }else{
            return (
                <AcceptFormData username={this.state.username} comments={this.state.comments} topic={this.state.topic}/>
            )
        }
    }
}

export default Form

将提交的表单数据传递到另一个组件

1 个答案: