Блог

Я создал Выпадающий список, который расширяет компонент. В этом я извлекаю значения выпадающего списка muliple и сохраняю их в постоянных данных. Я хочу передать эти данные из раскрывающегося компонента в другой компонент в виде функции. Любая помощь была бы действительно замечательной, так как я новичок в реагировании и сталкиваюсь с некоторыми трудностями.

 export class CascadingDropdown extends Component {  constructor(props) {  super(props)  this.state = {  ...  dropdown_data: []  }  }   componentDidMount() {  axios.get('/api/fetchCategory').then(response =gt; {  this.setState({  CategoryData: response.data  });  });  }   ChangeSubCategory = (e) =gt; {  this.setState({  category_id: e.target.value  });  axios.get('/api/fetchSubCategory?category_id='   e.target.value).then(response =gt; {  // console.log(response.data);  this.setState({  SubCategoryData: response.data,  });  });  }   ChangeSubject = (e) =gt; {  this.setState({  sub_category_id: e.target.value  });    axios.get('/api/fetchSubjects?sub_category_id='   e.target.value).then(response =gt; {  // console.log(response.data);  this.setState({  subject: response.data  });  });  }    storeData = (e) =gt; {  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 (   lt;div className ="row"gt;   . . .   lt;/divgt;  )  }  }   export default CascadingDropdown  

Значение из dropdown_data должно быть передано функции, и ниже приведен код, который я пробовал.

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

Это то, что я могу сделать для вложенного состояния и состояний обновления, я использовал один объект json dropdown_data и передал его дочерним элементам, его становится сложно обновить, но легко поддерживать дочерние элементы,
вариант 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 =gt; {  this.setState({  ...this.state,  CategoryData: response.data  });  }); }   ChangeSubCategory = (e) =gt; {  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 =gt; {  // console.log(response.data);  this.setState({  ...this.state,  SubCategoryData: response.data,  });  });  }   ChangeSubject = (e) =gt; {  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 =gt; {  // console.log(response.data);  this.setState({  ...this.state,  subject: response.data  });  });  }    storeData = (e) =gt; {  this.setState({  ...this.state,  dropdown_data: {  ...this.state.dropdown_data,  subject_id: e.target.value  }   });  }    render() {   console.log(this.state.dropdown_data)   return (   lt;div className ="row"gt;   lt;CreateTicket dropdown_data={this.state.dropdown_data}/gt;   lt;/divgt;  )  }  }   export default CascadingDropdown  

вы даже можете передавать обратные вызовы функций,

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

вот как вы можете перевести свое родительское состояние в функциональный компонент

 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 =gt; {  this.setState({  ...this.state,  CategoryData: response.data  });  }); }   ChangeSubCategory = (e) =gt; {  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 =gt; {  // console.log(response.data);  this.setState({  ...this.state,  SubCategoryData: response.data,  });  });  }   ChangeSubject = (e) =gt; {  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 =gt; {  // console.log(response.data);  this.setState({  ...this.state,  subject: response.data  });  });  }    storeData = (e) =gt; {  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 (   lt;div className ="row"gt;   lt;CreateTicket /gt;   lt;/divgt;  )  }  }   export default CascadingDropdown  

и его родительская функция заключается в,

 function CreateTicket(props) {   const [dropdown_data, setDropdown_data] = useState({  subject_id:"", category_id:"", sub_category_id:""  }); // use hooks now   ChangeSubCategory=(category_id)=gt;{  setDropdown_data({...dropdown_data,category_id})  }  ChangeSubject=(sub_category_id)=gt;{  setDropdown_data({...dropdown_data,sub_category_id})  }  storeData=(subject_id)=gt;{  setDropdown_data({...dropdown_data,subject_id})  }   return (  lt;div className ="container"gt;   lt;form onSubmit ={handleSubmit}gt;  lt;input id="emp_name" type="text" name="employee_name" className ="form-control" disabled = "disabled" onChange = {handleTicketInput} value = {empname} /gt;  lt;CascadingDropdown dropdown_data={dropdown_data} ChangeSubCategory={ChangeSubCategory} ChangeSubject={ChangeSubject} storeData={storeData}/gt;  lt;input id="form_other_subject" type="text" name="other_subject" disabled = "disabled" className ="form-control" value = {ticketInput.other_subject} onChange = {handleTicketInput} /gt;  lt;/formgt;  lt;/divgt;  )  }  

я надеюсь, что это сработает сейчас,