Передать множественные аргументы от дочернего реквизита родительскому методу

Question

Я новичок, чтобы реагировать JS.Здесь я пытаюсь сделать следующее: у меня есть родительский компонент, подобный следующему:

onchange(event) {
        console.log("function will be callled", event.target.value, event.target.id);


     { (this.props.lowData) && this.props.lowData.Low.length > 0 && this.props.lowData.Low.map(data => (
                        <LowRow technologies={this.state.technologies} onChange={this.onchange.bind(this)} data={data} key={data.id} />
                    ))}

Здесь есть метод onchnage, который я передаю в качестве подпорки дочернему элементу, который:

<select className="selectpicker btn btn-labeled btn-start selectId techDrop  margin-left-10" onChange={props.onChange}>
                    <option disabled selected value>None Selected</option>
                    {props.technologies && <Select techData={props.technologies} options={props.technologyName} />}
                </select>

Итак, теперь я хочу, чтобы при изменении пользователя в дочернем элементе:

onChange={props.onChange}

это вызывалось в родительском элементе, поэтому здесь я также хочупередать еще один параметр с таким как:

onChange = {props.onChange, props.id}so that Parent will get one Id as well, But its not working . And also I tried with the `props.onChange(props.id)` But no luck. Can any one help me with this ?

Answer 1

Во-первых, вам не рекомендуется привязывать функцию напрямую при рендеринге.Потому что, когда вы связываете функцию непосредственно при рендеринге, ваш компонент будет рендериться по многим причинам, например, setState, при получении новых реквизитов и т. Д. Каждый раз, когда он рендерится, он будет создавать новую функцию в сгенерированном файле пачки webpack, поэтому размер файла становится большим.поэтому всегда делайте привязку в конструкторе

Теперь по вашей проблеме.Сделайте карту в рендере напрямую и передайте onChange в качестве реквизита компоненту LowRow.Вам нужно сделать что-то вроде ниже, чтобы передать функцию в качестве опоры и отправить ей параметры в дочернем компоненте и получить доступ к нему в родительском компоненте.Эта концепция называется callbacks in реагировать.

Еще одна вещь, которую никогда не следует забывать добавлять ключ к родительскому элементу jsx всякий раз, когда вы генерируете элементы jsx в цикле.Ключ должен быть уникальным идентификатором из данных.Если ваши данные не содержат уникальный идентификатор, передайте индекс в качестве ключа, например key = {"key" + index}

constructor(props){
   super(props);
   this.onChange = this.onChange.bind(this);
}

onChange(event, id) {
    console.log("test", event, id);
 }

render(){
   const { lowData } = this.props;
   return(
     <div>
        {this.props.lowData && this.props.lowData.Low.map(data => (
             <LowRow key={data.id} technologies={this.state.technologies} onChange={this.onChange} data={data} key={data.id} />
         ))}
     </div>
   )
}

Выберите onChange

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

<select className="selectpicker btn btn-labeled btn-start selectId techDrop  margin-left-10" onChange={e  => props.onChange(e, id)}>
                    <option disabled selected value>None Selected</option>
                    {props.technologies && <Select techData={props.technologies} options={props.technologyName} />}
                </select>

Answer 2

Родительская onchange функция получит id во втором аргументе.

onchange(event, id) {
    console.log("function will be callled", event.target.value, id);
}

При вызове от ребенка вы звоните так.

onChange={(e)=> {props.onChange(e, props.id)}}