#reactjs
#reactjs
Вопрос:
Я создаю веб-страницу, содержащую таблицу. Данные таблицы
Теперь я хочу обновить данные строки таблицы по щелчку (строка таблицы). Я выполнил часть «по щелчку». После нажатия на строку таблицы: Открывается эта дочерняя страница
Теперь я хочу передать данные строки таблицы по щелчку в текстовые поля формы дочернего компонента. Как я могу это сделать?
Код родительского компонента:
export class QuotationForm extends React.Component<AllProps>{
public componentDidMount() {
const { data } = this.props;
if (data.length === 0) {
this.props.fetchRequest()
}
}
public render() {
const { loading, data, errors } = this.props
console.log(errors);
return (
<Page>
{loading amp;amp; (
<LoadingOverlay>
<LoadingOverlayInner>
<LoadingSpinner />
</LoadingOverlayInner>
</LoadingOverlay>
)}
{/* <p>
<small>Quotation Data Of Shiping</small>
</p> */}
{this.renderData(loading, data)}
</Page>
)
}
handleClick(quot:any){
alert(quot.quotationNumber)
console.log("passing data",quot)
}
private renderData(loading: boolean, data: IQuotation[]) {
const { classes }: any = this.props;
console.log("Quotation Data", this.props)
return (
<div className={classes.section}>
<Table className={classes.tableStyle}>
<TableHead className={classes.thead} >
<TableRow >
<TableCell className={classes.tcell}>QuotationNumber</TableCell>
<TableCell className={classes.tcell}>Date</TableCell>
<TableCell className={classes.tcell}>Quoted To</TableCell>
<TableCell className={classes.tcell}>Quoted By</TableCell>
<TableCell className={classes.tcell}>Valid Till</TableCell>
<TableCell className={classes.tcell}>Valid From</TableCell>
<TableCell className={classes.tcell}>Services</TableCell>
<TableCell className={classes.tcell}>Status</TableCell>
<TableCell className={classes.tcell}>Location</TableCell>
</TableRow>
</TableHead>
{loading amp;amp; data.length === 0}
{data.map((quot) => (
<TableBody className={classes.tbody}>
<TableRow hover key={quot.quotationNumber} className={classes.tcell}>
<TableCell><a href="/quotationUpdate" onClick={this.handleClick.bind(this,quot)}>{quot.quotationNumber}</a></TableCell>
<TableCell>{quot.date}</TableCell>
<TableCell>{quot.quotedTo}</TableCell>
<TableCell>{quot.quotedBy}</TableCell>
<TableCell>{quot.validTill}</TableCell>
<TableCell>{quot.validFrom}</TableCell>
<TableCell>{quot.services}</TableCell>
<TableCell>{quot.status}</TableCell>
<TableCell>{quot.location}</TableCell>
</TableRow>
</TableBody>))}
</Table>
</div>)
}
}
Код дочернего компонента (после нажатия на строку таблицы эта страница отображается):
class quotationUpdate extends React.Component {
render() {
const {classes}:any=this.props;
return (
<div>
<h3 style={{color:"black"}}>Update Data</h3>
<Card className={classes.cardStyle}>
<form style={{ padding: "5%" }}>
<Table className={classes.tableStyle} >
<TableRow>
<h5><TableCell>Quotation No<TextField variant="outlined" /></TableCell>
{/* {console.log(quotationNuber)} */}
<TableCell>Valid From <TextField variant="outlined" /></TableCell>
<TableCell>Vaild Till<TextField variant="outlined" /></TableCell></h5>
</TableRow>
<TableRow>
<h5><TableCell>Organization<TextField variant="outlined" /></TableCell>
<TableCell>Useability<TextField select variant="outlined" defaultValue="None" fullWidth helperText="Please Select Value">
<MenuItem value=""><em>None</em></MenuItem>
<MenuItem value={0}>Single</MenuItem>
<MenuItem value={1}>Multiple</MenuItem>
</TextField>
</TableCell>
<TableCell>Version<TextField variant="outlined" /></TableCell></h5>
</TableRow>
<TableRow>
<h5><TableCell>FastTrack<TextField multiline variant="outlined" /></TableCell>
<TableCell>Party Role <TextField select disabled defaultValue="Customer" fullWidth variant="outlined" /></TableCell>
<TableCell>Cargo Status<TextField variant="outlined" /></TableCell></h5>
</TableRow>
</Table><br /><br />
Комментарии:
1. Пожалуйста, вставьте свой код сюда. Трудно судить об этом, видя изображение
2. @NaieemMahmudSupto Пожалуйста, посмотрите мой код
Ответ №1:
Согласно вашему коду, компонент таблицы получает данные в реквизитах, это означает, что загруженные данные существуют в родительском компоненте. Таким образом, внутри дескриптора щелчка вы должны «пометить» выбранную строку, чтобы «обнаружить» ее при quotationUpdate рендеринге…
Вы можете отправить onRowSelected функцию в реквизитах, чтобы «пометить» выбранную строку после нажатия на нее.
Это решение не такое «приятное» и не будет очень хорошо поддерживаться при будущих изменениях…
Вы сталкиваетесь с классической проблемой управления состоянием в react. Есть много способов решить эту проблему, и наиболее «проверенным в боях» решением является redux.
Комментарии:
1. (нажмите дескриптор, вы должны «пометить» выбранную строку, чтобы «определить», когда отображается quotationUpdate …) как сделать?????
2.Вы можете отправить
onRowSelectedфункцию в реквизитах, чтобы «пометить» выбранную строку после нажатия на нее.
Ответ №2:
Хорошо, здесь вы меняете маршрут. Итак, тогда новый компонент начинает действовать.В этом случае вы можете сделать одну вещь.Создайте сервис, в котором вы будете временно сохранять данные, а после изменения маршрута обновления route получит данные из сервиса.Давайте посмотрим на пример.
class sharedService(){
static storeData:any;
constructor(){
}
}
Теперь импортируйте это в оба ваших компонента.Ваш родительский компонент будет выглядеть следующим образом.
import sharedService from 'your file location';
export class QuotationForm extends React.Component<AllProps>{
public componentDidMount() {
const { data } = this.props;
if (data.length === 0) {
this.props.fetchRequest()
}
}
public render() {
const { loading, data, errors } = this.props
console.log(errors);
return (
<Page>
{loading amp;amp; (
<LoadingOverlay>
<LoadingOverlayInner>
<LoadingSpinner />
</LoadingOverlayInner>
</LoadingOverlay>
)}
{/* <p>
<small>Quotation Data Of Shiping</small>
</p> */}
{this.renderData(loading, data)}
</Page>
)
}
handleClick(quot:any){
alert(quot.quotationNumber)
console.log("passing data",quot)
sharedService.storeData=quot;
}
private renderData(loading: boolean, data: IQuotation[]) {
const { classes }: any = this.props;
console.log("Quotation Data", this.props)
return (
<div className={classes.section}>
<Table className={classes.tableStyle}>
<TableHead className={classes.thead} >
<TableRow >
<TableCell className={classes.tcell}>QuotationNumber</TableCell>
<TableCell className={classes.tcell}>Date</TableCell>
<TableCell className={classes.tcell}>Quoted To</TableCell>
<TableCell className={classes.tcell}>Quoted By</TableCell>
<TableCell className={classes.tcell}>Valid Till</TableCell>
<TableCell className={classes.tcell}>Valid From</TableCell>
<TableCell className={classes.tcell}>Services</TableCell>
<TableCell className={classes.tcell}>Status</TableCell>
<TableCell className={classes.tcell}>Location</TableCell>
</TableRow>
</TableHead>
{loading amp;amp; data.length === 0}
{data.map((quot) => (
<TableBody className={classes.tbody}>
<TableRow hover key={quot.quotationNumber} className={classes.tcell}>
<TableCell><a href="/quotationUpdate" onClick={this.handleClick.bind(this,quot)}>{quot.quotationNumber}</a></TableCell>
<TableCell>{quot.date}</TableCell>
<TableCell>{quot.quotedTo}</TableCell>
<TableCell>{quot.quotedBy}</TableCell>
<TableCell>{quot.validTill}</TableCell>
<TableCell>{quot.validFrom}</TableCell>
<TableCell>{quot.services}</TableCell>
<TableCell>{quot.status}</TableCell>
<TableCell>{quot.location}</TableCell>
</TableRow>
</TableBody>))}
</Table>
</div>)
}
}
теперь ваш компонент обновления будет выглядеть следующим образом.
import sharedService from 'your file location';
class quotationUpdate extends React.Component {
render() {
const {classes}:any=this.props;
const data = sharedService.storeData;
return (
<div>
<h3 style={{color:"black"}}>Update Data</h3>
<Card className={classes.cardStyle}>
<form style={{ padding: "5%" }}>
<Table className={classes.tableStyle} >
<TableRow>
<h5><TableCell>Quotation No<TextField variant="outlined" /></TableCell>
{/* {console.log(quotationNuber)} */}
<TableCell>Valid From <TextField variant="outlined" /></TableCell>
<TableCell>Vaild Till<TextField variant="outlined" /></TableCell></h5>
</TableRow>
<TableRow>
<h5><TableCell>Organization<TextField variant="outlined" /></TableCell>
<TableCell>Useability<TextField select variant="outlined" defaultValue="None" fullWidth helperText="Please Select Value">
<MenuItem value=""><em>None</em></MenuItem>
<MenuItem value={0}>Single</MenuItem>
<MenuItem value={1}>Multiple</MenuItem>
</TextField>
</TableCell>
<TableCell>Version<TextField variant="outlined" /></TableCell></h5>
</TableRow>
<TableRow>
<h5><TableCell>FastTrack<TextField multiline variant="outlined" /></TableCell>
<TableCell>Party Role <TextField select disabled defaultValue="Customer" fullWidth variant="outlined" /></TableCell>
<TableCell>Cargo Status<TextField variant="outlined" /></TableCell></h5>
</TableRow>
</Table><br /><br />
надеюсь, у вас это сработает.
Комментарии:
1. Глобальная общая информация не является хорошей идеей… Согласно вашему решению
data, которое вводится в props, также может находиться в этом глобальном общем состоянии … плохая идея2. Я это знаю. Но он меняет маршрут, а также не использует какой-либо http-вызов, что еще он может сделать здесь, а не делиться этим? @gilamran
3. Он должен передать данные для отображения и функцию для «пометки» выбранной строки. В родительском компоненте при вызове этой функции отметьте выбранную строку.
4. Я думаю, что здесь проблема не в маркировке таблицы, а в том, что он хочет передать данные следующему маршруту. Пожалуйста, внимательно проверьте вопрос.