Я хочу получить доступ к вложенному компоненту из родительского компонента.
Это Bill Form.jsx
import BillDetailForm from './BillDetailForm';
render(){
return (
<form onSubmit={handleSubmit}>
<FieldArray
name= 'detail'
component={BillDetailForm}
placeholder= '...detail'
label='Detail'
/>
</form>
);
}
}
BillForm - это компонент, содержащий вложенный компонент, который содержит другой вложенный компонент, и этот один содержит другой вложенный компонент и т. д.
Это вложенный компонент BillForm: BillDetailForm.jsx
render(){
return(
<form onSubmit={ handleSubmit }>
<div>Detail:</div>
<FieldArray
name= 'detail'
component={RenderDetail}
label='Detail'
/>
</form>
)
}
Внутри BillDetailForm находится RenderDetail:
const RenderDetail = ({fields, meta: { error,submitFailed}},props) => (
<dl>
<dt>
<button type="button" className= 'btn btn-primary' onClick={() => fields.push()}>Add
Detail</button>
{submitFailed && error && <span>{error}</span>}
</dt>
{ fields.map((registerDetail, index) =>
//In the following line renderDetail is accesing Detail component.
<Detail detailItem={registerDetail} fields={fields} index={index} key={index}/>
)
}
{error && <dt className="error">{error}</dt>}
</dl>
);
Это является Компонентом класса детализации:
class Detail extends Component{
render(){
const{detailItem,index,fields,isSubtotal} = this.props;
return(
<dd key={index}>
<br></br>
<button className= 'btn btn-light mr-2'
type="button"
title="Remove detail"
onClick={() => { fields.remove(index)
if(fields.length == 0 || fields.length === undefined){
}
try{
for(let x in fields){
fields.remove(index)
let d = fields.selectedIndex;
if(fields.remove(index) && d >= 1 && d< fields.length ){
fields.removeAll(index);
}
}
}catch{console.info("deletes non numerical index")}
}}> Delete </button>
<h4>DetailRegister #{index + 1}</h4>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.quantity`}
component= {NumberPickerInteger}
placeholder= '...quantity'
label = "Quantity"
/>
<br></br>
<h3><b>Product</b></h3>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.code`}
type="number"
component= {RenderFieldNumeric}
placeholder='...Product's code'
label = "Product's code"
/>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.name`}
type="text"
component= {RenderField}
placeholder='...Product's name'
label = "Product's name"
/>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.price`}
component= {NumberPickerr}
placeholder= '...Price'
label = "Product's price"
/>
<br></br>
<h3><b>Subtotal</b></h3>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.subtotal`}
component= {SubtotalWidget}
placeholder= '...subtotal'
label = "Subtotal"
>
{isSubtotal}
</Field>
</dd>
);
}
}
Я хочу получить доступ, например, к $ {props.detailItem} .subtotal, который подробно описан в BillForm. BillForm обращается к BillDetailForm, BillDetailForm обращается к renderDetail, а последний renderDetail получает доступ к Detail.
Вопрос заключается в следующем: как получить доступ и использовать реквизиты, такие как количество и промежуточный итог, с динамическим c index (props.index) из BillForm? Я хочу получить доступ к компоненту Detail из BillForm, соблюдая следующую последовательность действий при доступе к заказу: BillForm -> BillDetailForm -> RenderDetail -> Detail
Это проблема root:
Как получить доступ ${props.detailItem}.subtotal от BillForm.
Мой метод подключения:
BillForm = connect((state,props,fields) =>{
//tell you in pseudocode but need to access props.quantity from detailItem that
//is in Detail Component. Detail class component is inside
// renderDetail functional component, renderDetail is inside FormDetailBill
//class component and FormDetail bill is inside Bill Form
// I have to getting props.detailITem.quantity from BillForm
fields.map((field,index) =>{
//here I'm accessing FormBillDetail
<FormBillDetail field={field}/>
Object.keys(props.field).map((fieldfield,index) =>{
<renderDetail fields={fieldfield}/>
props.fields.map((detailitem,index) =>{
console.log(detailItem.subtotal);
}
}
})
псевдокод, например
return{
isTotal: BillForm.BillDetailForm.renderDetail.Detail.reduce((total,detailItem)
=>{
return total + detailItem.subtotal;
),0}
}
})(BillForm)
Ранее я публиковал нечто подобное. Но я вижу, что вы меня не поняли.
Мне нужно получить доступ, например, к количеству detailItem из BillForm.
В Connect, который связан с BillForm, мне нужно получить доступ к количеству, которое находится внутри detailItem, которое находится внутри компонента Detail от BillForm. И как он будет использовать функцию уменьшения с массивом деталей из компонента Detail в BillForm.
псевдокод, например
return{
isTotal: BillForm.BillDetailForm.
renderDetail.Detail.reduce((total,detailItem)
=>
{
return total + detailItem.subtotal;
),0}
}