Question

我创建了一个处理表单的Form.js组件，并将其呈现在App.js中，并且想知道如何从App.js中的Form.js访问诸如videoURL，开始和结束之类的变量。我看到了另一篇有关使用道具的帖子，当您像这样<Form videoURL={videoURL} start={start} end={end}/>进行渲染时，遇到了不确定的“ videoUrl”，“ start”和“ end”。

这是我的Form.js文件，

import React, { Component } from 'react'

class Form extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             video_url: '',
             start: 0,
             end: 0

        }
    }

    handleVideoUrlChange = (event) => {
        this.setState({
            videoURL: event.target.value
        })
    }

    handleStartChange = (event) => {
        this.setState({
            start: event.target.value
        })
    }

    handleEndChange = (event) => {
        this.setState({
            end: event.target.value
        })
    }

    handleSubmit = (event) => {
        event.preventDefault()
    }
    
    render() {
        const { videoURL, start, end } = this.state
        return (
            <form onSubmit={this.handleSubmit} method="post">
                <div>
                    <label>Video URL</label>
                    <input type="text" value={videoURL} onChange={this.handleVideoUrlChange}/>
                </div>
                <div>
                    <label>Start</label>
                    <input type="number" value={start} onChange={this.handleStartChange}/>
                </div>
                <div>
                    <label>End</label>
                    <input type="number" value={end} onChange={this.handleEndChange}/>
                </div>
                <button type="submit">Submit</button>
            </form>

        )
    }
}

export default Form

这是我的App.js文件，

import React , {useState, useEffect} from 'react';
import Form from "./Form";

function App() {
    const [data, setData] = useState([])

    useEffect(() => {
        fetch('/test')
        .then(response => response.json())
        .then(data => setData(data))
    }, []);
   
    return (
        <>
        <Form videoURL={videoURL} start={start} end={end}/>
        <div className="container">
            <h2>Top Users</h2>
            <table>
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>User</th>
                        <th># of Messages</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        data.map((item, i) => (
                            <tr key={item.user}>
                                <td>{i + 1}</td>
                                <td>{item.user}</td>
                                <td>{item.messages}</td>
                            </tr>
                        ))
                    }
                </tbody>
            </table>
        </div>
    )
}

export default App;

此外，一旦我能够访问这些变量，就尝试在App.js中向后端发出POST请求，进行一些工作，然后返回结果。会像这样吗？

    useEffect(() => {
        fetch('/test'),
            {
                method: "POST",
                body: JSON.stringify({
                    'videoURL': videoURL,
                    'start': start,
                    'end': end
                })
            }
            .then(response => response.json())
            .then(data => setData(data))
    }, []);

Answer 1

因此，您想从父组件访问子状态。这是一种方法。

步骤1：

首先，您需要在App.js文件中添加一个函数，以从子组件中接收数据。在App.js中

const [videoUrl , setVideoUrl] = useState('')

const  receiveVideoUrlFromChildren = (videoUrlFromChildren) => {
   setVideoUrl(videoUrlFromChildren)
}

步骤2：

然后将此函数传递给您的子组件。因此，在您的App.js内部返回添加此内容。

<Form sendDataToParent=(receiveVideoUrlFromChildren) />

步骤3：

每当Children中的值更改时，就通过调用此函数将数据传递回父级。在Form.js内部

handleVideoUrlChange = (event) => {
    this.setState({
        videoURL: event.target.value
    })
    this.props.sendDataToParent(event.target.value)
}

因此，现在您可以从父组件访问数据。您可以执行3次。对于3个变量。或使用一个功能将所有数据作为对象发送。

如何在App.js中呈现的组件中访问变量

1 个答案:

步骤1：

步骤2：

步骤3：