반응 - 기존 웹 사이트의 첫 번째 구성 요소에서 두 번째 구성 요소를 호출할 수 없는 선택 변경 시
class DownloadCenter extends React.Component {
constructor(props) {
super(props);
this.state={
productDownloadList : []
}
}
componentDidMount() {
debugger;
$("#select_productLine13").select2();
axios({
method: 'POST',
url: 'http://localhost:8082/mysoftware/support/pdapi/getProductLines',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
data: {}
})
.then(response =>{
console.log(response)
/*#__PURE__*/
this.setState({productDownloadList : response.data.productLineDTOList})
})
.catch(
error => {
console.log(console.log(error))
}
);
}
render() {
debugger;
const {productDownloadList} = this.state
let productDownloadList1 = productDownloadList.length > 0 && productDownloadList.map((item, i) => {
return /*#__PURE__*/React.createElement("option", {
key: i,
value: item.productLineId
}, item.productLineName);
}, void 0);
return React.createElement("div", {
class: "fl"
}, /*#__PURE__*/React.createElement("select", {
id: "select_productLine13",
name: "selDataVal",
onChange: this.aa
}, productDownloadList1));
}
}
$("#select_productLine13").on("change", function () {
debugger;
console.log("anc")
/*#__PURE__*/
React.createElement(DownloadCenter1, null);
})
export default DownloadCenter ;
const domContainer = document.querySelector('#select_productLine13');
const root = ReactDOM.createRoot(domContainer);
root.render(e(DownloadCenter));
---------------------------jsp file which calling above js-------------------------
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="module" src="<c:url value="/resources/js/reactjs/download_center.js"/>" ></script>
<script type="module" src="<c:url value="/resources/js/reactjs/download_center1.js"/>" ></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
------------------------------download_center1.js-----------------------------------
"use strict";
const e = React.createElement;
class DownloadCenter1 extends React.Component {
constructor(props) {
super(props);
this.state={
productDownloadList : []
}
}
componentDidMount() {
debugger;
$("#select_productLine13").select2();
axios({
method: 'POST',
url: 'http://localhost:8082/mysoftware/support/pdapi/downloadCenter/productNames',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
data: {}
})
.then(response =>{
console.log(response)
/*#__PURE__*/
this.setState({productDownloadList : response.data.productLineDTOList})
})
.catch(
error => {
console.log(console.log(error))
}
);
}
render() {
console.log("inside");
return ;
//return React.createElement("div", {value: "Hi"});
/*#__PURE__*/
//React.createElement(DataTable, {
// title: "Desserts",
// selectableRows: true
//});
}
}
export default DownloadCenter1 ;
const domContainer = document.querySelector('#select_productLine112');
const root = ReactDOM.createRoot(domContainer);
root.render(e(DownloadCenter1));
Reference
이 문제에 관하여(반응 - 기존 웹 사이트의 첫 번째 구성 요소에서 두 번째 구성 요소를 호출할 수 없는 선택 변경 시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kapsebharat1/react-onchange-of-select-unable-to-call-second-component-from-first-in-existing-website-4egg텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)