如何将数据从组件传递到 ReactJS 中的表单提交？

Question

I have created Dropdown which extends Component. In this I am fetching muliple dropdown values an storing it in const data. I want pass this data from Dropdown Component to another Component in the form of function. Any help would be really great as I am new to React and facing bit challenge.

export class CascadingDropdown extends Component {
    constructor(props) {
        super(props)
        this.state = {
            ...
            dropdown_data: []
        }
    }

    componentDidMount() {
        axios.get('/api/fetchCategory').then(response => {
        this.setState({
            CategoryData: response.data
        });
    });
 }

    ChangeSubCategory = (e) => {
        this.setState({
            category_id: e.target.value
        });
        axios.get('/api/fetchSubCategory?category_id=' + e.target.value).then(response => {
            // console.log(response.data);
            this.setState({
                SubCategoryData: response.data,
            });
        });
    }

    ChangeSubject = (e) => {
        this.setState({
            sub_category_id: e.target.value
        });
        
        axios.get('/api/fetchSubjects?sub_category_id=' + e.target.value).then(response => {
            // console.log(response.data);
            this.setState({
                subject: response.data
            });
        });
    }   

    storeData = (e) => {
        this.setState({
            subject_id: e.target.value
        });
    }    

    render() {       

        const dropdown_data = {
            category_id: this.state.category_id,
            sub_category_id: this.state.sub_category_id,
            subject_id: this.state.subject_id
        }

        console.log(dropdown_data)

        return (  
            <div className ="row">  
                . . .        
            </div>
        )
    }  
}  

export default CascadingDropdown

The value from dropdown_data should be passed to a function and below is the code that I have tried.

function CreateTicket() {
    const [ticketInput, setTicketInput] = useState({           
       category_id: '',
       sub_category_id: '',
       subject_id: '',
       other_subject: '',
       file: '',
       auto_message: '',
    });
    
    const handleTicketInput = (e) => {
       e.persist();
        setTicketInput({...ticketInput, [e.target.name]: e.target.value })
    }
    
      const submitTicket = (e) => {
         e.preventDefault();
          const data = {
                ...
         }
       axios.post(`/api/store-ticket`, data).then(res => {
         console.log(res.data);
             . . .
            })
        }
    
      return (
        <div className ="container"> 
        <form onSubmit ={handleSubmit}>
             <input id="emp_name" type="text" name="employee_name" className ="form-control" disabled = "disabled" onChange = {handleTicketInput} value = {empname} />
             <CascadingDropdown />
             <input id="form_other_subject" type="text" name="other_subject" disabled = "disabled" className ="form-control" value = {ticketInput.other_subject} onChange = {handleTicketInput} /> 
        
            </form>
          </div>
        )
        }
        export default CreateTicket;

Answer 1

这是我可以为嵌套状态做的，和更新状态，我使用了单个 json object dropdown_data 并传递给 children，更新它的状态变得复杂但很容易支撑 children,
解决方案 1（旧）：

export class CascadingDropdown extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dropdown_data: {
              subject_id, category_id, sub_category_id
            },
            CategoryData,
            SubCategoryData,
            subject
        }
    }
    this.ChangeSubCategory = this.ChangeSubCategory.bind(this);
    this.ChangeSubject = this.ChangeSubject.bind(this);
    this.storeData = this.storeData.bind(this);

    componentDidMount() {
        axios.get('/api/fetchCategory').then(response => {
        this.setState({
            ...this.state,
            CategoryData: response.data
        });
    });
}

    ChangeSubCategory = (e) => {
        this.setState({
            ...this.state,
            dropdown_data: {
              ...this.state.dropdown_data,
              category_id: e.target.value
            }
        });
        axios.get('/api/fetchSubCategory?category_id=' + e.target.value).then(response => {
            // console.log(response.data);
            this.setState({
              ...this.state,
                SubCategoryData: response.data,
            });
        });
    }

    ChangeSubject = (e) => {
        this.setState({
          ...this.state,
          dropdown_data: {
            ...this.state.dropdown_data,
            sub_category_id: e.target.value
          }
        });
        
        axios.get('/api/fetchSubjects?sub_category_id=' + e.target.value).then(response => {
            // console.log(response.data);
            this.setState({
              ...this.state,
                subject: response.data
            });
        });
    }   

    storeData = (e) => {
        this.setState({
          ...this.state,
          dropdown_data: {
            ...this.state.dropdown_data,
            subject_id: e.target.value
          } 
        });
    }    

    render() {       
        console.log(this.state.dropdown_data)

        return (  
            <div className ="row">  
                <CreateTicket dropdown_data={this.state.dropdown_data}/>    
            </div>
        )
    }  
}  

export default CascadingDropdown

你甚至可以传递函数回调，

<CreateTicket dropdown_data={this.state.dropdown_data} ChangeSubCategory={ChangeSubCategory} ChangeSubject={ChangeSubject} storeData={storeData}/

这就是将 parent 状态转化为功能组件的方法

function CreateTicket(props) {

  const [dropdown_data, setDropdown_data] = useState(props.dropdown_data); // use hooks now
  //const dropdown_data = this.props.dropdown_data;

}

我根据你的新问题编辑的新答案如下，
方案 2（新）：

export class CascadingDropdown extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dropdown_data: {
              subject_id:this.props.subject_id, category_id:this.props.category_id, sub_category_id:this.props.sub_category_id
            },
            CategoryData,
            SubCategoryData,
            subject
        }
    }
    // this.ChangeSubCategory = this.ChangeSubCategory.bind(this);
    // this.ChangeSubject = this.ChangeSubject.bind(this);
    // this.storeData = this.storeData.bind(this);

    componentDidMount() {
        axios.get('/api/fetchCategory').then(response => {
        this.setState({
            ...this.state,
            CategoryData: response.data
        });
    });
}

    ChangeSubCategory = (e) => {
      this.props.ChangeSubCategory(e.target.value)
        this.setState({
            ...this.state,
            dropdown_data: {
              ...this.state.dropdown_data,
              category_id: e.target.value
            }
        });
        axios.get('/api/fetchSubCategory?category_id=' + e.target.value).then(response => {
            // console.log(response.data);
            this.setState({
              ...this.state,
                SubCategoryData: response.data,
            });
        });
    }

    ChangeSubject = (e) => {
      this.props.ChangeSubject(e.target.value);
        this.setState({
          ...this.state,
          dropdown_data: {
            ...this.state.dropdown_data,
            sub_category_id: e.target.value
          }
        });
        
        axios.get('/api/fetchSubjects?sub_category_id=' + e.target.value).then(response => {
            // console.log(response.data);
            this.setState({
              ...this.state,
                subject: response.data
            });
        });
    }   

    storeData = (e) => {
      this.props.storeData(e.target.value);
        this.setState({
          ...this.state,
          dropdown_data: {
            ...this.state.dropdown_data,
            subject_id: e.target.value
          } 
        });
    }    

    render() {       
        console.log(this.state.dropdown_data)

        return (  
            <div className ="row">  
                <CreateTicket />    
            </div>
        )
    }  
}  

export default CascadingDropdown

它的parent函数是，

function CreateTicket(props) {

  const [dropdown_data, setDropdown_data] = useState({
    subject_id:"", category_id:"", sub_category_id:""
  }); // use hooks now

  ChangeSubCategory=(category_id)=>{
    setDropdown_data({...dropdown_data,category_id})
  }
  ChangeSubject=(sub_category_id)=>{
    setDropdown_data({...dropdown_data,sub_category_id})
  }
  storeData=(subject_id)=>{
    setDropdown_data({...dropdown_data,subject_id})
  }

  return (
    <div className ="container"> 
    <form onSubmit ={handleSubmit}>
         <input id="emp_name" type="text" name="employee_name" className ="form-control" disabled = "disabled" onChange = {handleTicketInput} value = {empname} />
            <CascadingDropdown dropdown_data={dropdown_data} ChangeSubCategory={ChangeSubCategory} ChangeSubject={ChangeSubject} storeData={storeData}/>
         <input id="form_other_subject" type="text" name="other_subject" disabled = "disabled" className ="form-control" value = {ticketInput.other_subject} onChange = {handleTicketInput} />
        </form>
      </div>
    )

}

我希望这会起作用，

如何将数据从组件传递到 ReactJS 中的表单提交？

How to pass data from Component to form submit in ReactJS?

laravel

reactjs

react-state