我如何从 React class 组件中的两个动态表单获取输入数据？

Question

我是 react.js 的新手。我不知道如何通过按钮更新状态并从动态表单获取输入数据作为 json 数组形式。我面临 onchangehandle 事件 enter image description here 的问题。这里提到我创建的 ui 动态表单。这里有两个表格正在打开动态都喜欢添加更多。

import React from "react";
import { Button, Container, Col, Form, InputGroup } from "react-bootstrap";
import { FaTrashAlt } from "react-icons/fa";
import Accordion from 'react-bootstrap/Accordion';


class Forms extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        // _id: "6196350112f781463c760aa0",
        // book_title: "",
        // book_authore: "",
        // book_overview: "",
        // book_category: "",
        // book_genre: "",
        // book_tag: "",
        // book_languages: "",
        // book_duration: "",
        // book_rating: 5,
        // book_publication: "",
        // book_created_date: "",
        // booksEpdf: "",
        // booksAudio: "",
        // book_rating_count: 0,
        // book_review: 0,
        // book_like: 0,
        video_data: [
            {
               _id: "",
                book_All_details: "",
                number_of_chapters:"",
                chapter: 1,
                video_title: "",
                description: "",
                video_url: "",
                video_image: "",
                releaseDate: "",
                subvideo_data: [
                    {
                        _id: "",
                        subchapterid:"",
                        subchapter: 1,
                        subvideo_title: "",
                        subdescription: "",
                        subvideo_url: "",
                        subvideo_image: "",
                        subreleaseDate: "",
                    },
                  
                ],
        
            },
        
     
        ],
  
    }  
}

    handleChange(event){
        this.setState({[event.target.video_title]:event.target.value})
        console.log(event)
            
    }
        
    //to add a tier
    addTClick = (i) => {
        const video_data = [...this.state.video_data];
        video_data[i].subvideo_data.push({ subvideo_title:"", subdescription:"",subvideo_url:"",subvideo_image:""});
        this.setState({ video_data });
        console.log(video_data)
    };

    //to remove a tier
    removeTClick = (i, idx) => {
        const video_data =  [...this.state.video_data];
        video_data[i].subvideo_data.splice(idx, 1);
        this.setState({ video_data });
    };


    //to add region and tier
    addFTClick = () => {
        const video_data = [...this.state.video_data];
        video_data.push({
                number_of_chapters: "",
                chapter: "",
                video_title: "",
                description: "",
                video_url: "",
                video_image: "",
                subvideo_data: [{subvideo_title:"", subdescription:"",subvideo_url:"",subvideo_image:""} ]
                });
                this.setState({ video_data });
            };

    render() {
        const   removeFormFields =(i) =>{
        const video_data = [...this.state.video_data];
        video_data.splice(i, 1);
            this.setState({ video_data });
        }

    return (
        <Container>
            {this.state.video_data.map((video_datas, i) => (
            <form key={i}>
                  
            <div class="container" style={{background:'aqua'}}>
                <div class="form-group col-sm-4">
                    <label>Enter Chapter Name:</label>
                    <input type="text" name="number_of_chapters"
                             onChange={this.handleChange.bind(this)} 
                    value={this.state.number_of_chapters} 
                    class="form-control" placeholder="title" />
                </div>
            <div class="row">
                <div class="form-group col-sm-6">
                    <label>Title:</label>
                    <input type="text"              onChange={this.handleChange.bind(this)} 
                    value={this.state.video_title} 
                        name="video_title" class="form-control"  placeholder="title" />
                </div>
                <div class="form-group col-sm-6">
                    <label>Description:</label>
                    <input type="text"               onChange={this.handleChange.bind(this)} 
                    value={this.state.description} 
                        name="description"  class="form-control"  placeholder="authors" />
                </div>
            </div>
            <div class="form-group">
                <label>Thambnail image:</label>
                <input               onChange={this.handleChange.bind(this)} 
                    value={this.state.video_image} 
                        name ="video_image" type="file" class="form-control"  />
            </div>
            <div class="form-group">
                <label>Upload Video:</label>
                <input               onChange={this.handleChange.bind(this)} 
                    value={this.state.video_url} 
                        name="video_url" type="file" class="form-control pb-4" />
            </div> <br></br>
            {video_datas.subvideo_data.map((subvideo_datas, idx) => (
                <div class="container bg-success py-2" key={idx}> 
                    <div className="main">
                        <div class="row">
                        <div class="form-group col-sm-6">
                            <label>Title:</label>
                            <input type="text" ref="video_title"
                             onChange={this.handleChange.bind(this)}   value={this.state.subvideo_title} 
                                name="subvideo_title" class="form-control"  placeholder="title" />
                        </div>
                            <div class="form-group col-sm-6">
                            <label>Description:</label>
                            <input type="text"  onChange={this.handleChange.bind(this)} 
                             value={this.state.subdescription}   name="subdescription" class="form-control"  placeholder="title" />
                        </div>
                    </div> 
                    <div class="form-group">
                        <label>Thambnail image:</label>
                        <input  name ="subvideo_image"  onChange={this.handleChange.bind(this)} 
                          value={this.state.subvideo_image} type="file" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Upload Video:</label>
                        <input  name="video_url" onChange={this.handleChange.bind(this)} 
                          value={this.state.subvideo_url} type="file" class="form-control pb-4" />
                    </div> <br></br>
                    <Button  variant="danger"  onClick={this.removeTClick.bind(this, i, idx)}><FaTrashAlt style={{ marginRight:"5px"}}/>Remove</Button>
                    </div>
                    </div>
                    ))}
                    <div className="button-section" style={{textAlign:"center"}}>
                         <Button variant="link" className="addMoreBtn"onClick={this.addTClick.bind(this, i)}>+Add More </Button>
                    </div>
                    {
                        i? 
                        <Button  variant="danger" onClick={() => removeFormFields(i)}><FaTrashAlt style={{ marginRight:"5px"}}/>Remove</Button>
                        : null
                    }
                    </div>
                    </form>
                    ))}
                   <div className="button-section" style={{textAlign:"center"}}>
                        <Button className="addMoreBtn" onClick={this.addFTClick.bind(this)}>
                                +Add chapter
                        </Button>
                    </div>
        </Container>
      );
  }
}

export default Forms;

Answer 1

试试这个：

import React from "react";
import { Button, Container, Col, Form, InputGroup } from "react-bootstrap";
import { FaTrashAlt } from "react-icons/fa";
import Accordion from 'react-bootstrap/Accordion';

class Forms extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            video_data: [
                {
                    _id: "",
                    book_All_details: "",
                    number_of_chapters: "",
                    chapter: 1,
                    video_title: "",
                    description: "",
                    video_url: "",
                    video_image: "",
                    releaseDate: "",
                    subvideo_data: [
                        {
                            _id: "",
                            subchapterid: "",
                            subchapter: 1,
                            subvideo_title: "",
                            subdescription: "",
                            subvideo_url: "",
                            subvideo_image: "",
                            subreleaseDate: "",
                        },
                    ],
                }]
        }
        this.handleChange = this.handleChange.bind(this);
        this.addFTClick = this.addFTClick.bind(this);
        this.addTClick = this.addTClick.bind(this);
        this.removeTClick = this.removeTClick.bind(this);
        this.removeFormFields = this.removeFormFields.bind(this);
        this.handleChangeSubVideo = this.handleChangeSubVideo.bind(this);
    }

    handleChange(event, index) {
        this.setState(prevState => {
            const nextState = [...prevState.video_data];
            nextState[index][event.target.name] = event.target.value;
            return { video_data: nextState };
        });
    }

    handleChangeSubVideo(event, index, subIndex) {
        this.setState(prevState => {
            const nextState = [...prevState.video_data];
            nextState[index].subvideo_data[subIndex][event.target.name] = event.target.value;
            return { video_data: nextState };
        });
    }

    //to add a tier
    addTClick = (i) => {
        this.setState(prevState => {
            const nextState = [...prevState.video_data];
            nextState[i].subvideo_data.push({ subvideo_title: "", subdescription: "", subvideo_url: "", subvideo_image: "" });
            return { video_data: nextState };
        });
    };

    //to remove a tier
    removeTClick = (i, idx) => {
        this.setState(prevState => {
            const nextState = [...prevState.video_data];
            nextState[i].subvideo_data.splice(idx, 1);
            return { video_data: nextState };
        });
    };


    //to add region and tier
    addFTClick = () => {
        this.setState(prevState => {
            const nextState = [...prevState.video_data];
            nextState.push({
                number_of_chapters: "",
                chapter: "",
                video_title: "",
                description: "",
                video_url: "",
                video_image: "",
                subvideo_data: [{ subvideo_title: "", subdescription: "", subvideo_url: "", subvideo_image: "" }]
            });
            return { video_data: nextState };
        });
    };

    removeFormFields = (i) => {
        this.setState(prevState => {
            const nextState = [...prevState.video_data];
            nextState.splice(i, 1);
            return { video_data: nextState };
        });
    }

    render() {


        return (
            <Container>
                {this.state.video_data.map((video_datas, i) => (
                    <form key={i}>
                        <div class="container" style={{ background: 'aqua' }}>
                            <div class="form-group col-sm-4">
                                <label>Enter Chapter Name:</label>
                                <input type="text" name="number_of_chapters"
                                    onChange={(e) => this.handleChange(e, i)}
                                    value={this.state.number_of_chapters}
                                    class="form-control" placeholder="title" />
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>Title:</label>
                                    <input type="text" onChange={(e) => this.handleChange(e, i)}
                                        value={this.state.video_title}
                                        name="video_title" class="form-control" placeholder="title" />
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>Description:</label>
                                    <input type="text" onChange={(e) => this.handleChange(e, i)}
                                        value={this.state.description}
                                        name="description" class="form-control" placeholder="authors" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Thambnail image:</label>
                                <input onChange={(e) => this.handleChange(e, i)}
                                    value={this.state.video_image}
                                    name="video_image" type="file" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label>Upload Video:</label>
                                <input onChange={(e) => this.handleChange(e, i)}
                                    value={this.state.video_url}
                                    name="video_url" type="file" class="form-control pb-4" />
                            </div> <br></br>
                            {video_datas.subvideo_data.map((subvideo_datas, idx) => (
                                <div class="container bg-success py-2" key={idx}>
                                    <div className="main">
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <label>Title:</label>
                                                <input type="text" ref="video_title"
                                                    onChange={(e) => this.handleChangeSubVideo(e, i, idx)} value={this.state.subvideo_title}
                                                    name="subvideo_title" class="form-control" placeholder="title" />
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <label>Description:</label>
                                                <input type="text" onChange={(e) => this.handleChangeSubVideo(e, i, idx)}
                                                    value={this.state.subdescription} name="subdescription" class="form-control" placeholder="title" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>Thambnail image:</label>
                                            <input name="subvideo_image" onChange={(e) => this.handleChangeSubVideo(e, i, idx)}
                                                value={this.state.subvideo_image} type="file" class="form-control" />
                                        </div>
                                        <div class="form-group">
                                            <label>Upload Video:</label>
                                            <input name="video_url" onChange={(e) => this.handleChangeSubVideo(e, i, idx)}
                                                value={this.state.subvideo_url} type="file" class="form-control pb-4" />
                                        </div> <br></br>
                                        <Button variant="danger" onClick={() => this.removeTClick(i, idx)}><FaTrashAlt style={{ marginRight: "5px" }} />Remove</Button>
                                    </div>
                                </div>
                            ))}
                            <div className="button-section" style={{ textAlign: "center" }}>
                                <Button variant="link" className="addMoreBtn" onClick={() => this.addTClick(i)}>+Add More </Button>
                            </div>
                            {
                                i ?
                                    <Button variant="danger" onClick={() => this.removeFormFields(i)}><FaTrashAlt style={{ marginRight: "5px" }} />Remove</Button>
                                    : null
                            }
                        </div>
                    </form>
                ))}
                <div className="button-section" style={{ textAlign: "center" }}>
                    <Button className="addMoreBtn" onClick={() => this.addFTClick()}>
                        +Add chapter
                    </Button>
                </div>
            </Container>
        );
    }
}

我如何从 React class 组件中的两个动态表单获取输入数据？

how can i get input data from two dynamic form in react class component?

node.js

reactjs

react-redux