Как получить значение динамически созданного поля ввода с ответом

Question

Я пытаюсь создать динамику с помощью React. Пока мне удалось показать и скрыть форму без проблем. Теперь мне нужно получить значения из созданных полей, и это вызывает некоторые проблемы.

Это мой код.

Первый мой динамический компонент, который будет добавлен, когда люди нажимают кнопку:

class MediaInput extends React.Component { 
 
    render() { 
 
    const linkName = `link-${this.props.index}`; 
 
    const contentName = `content-${this.props.index}`; 
 
    const linkValue = `this.props.${linkName}`; 
 
    const contentValue = `this.props.${contentName}`; 
 

 
    return (
 
     <div> 
 
     <ControlLabel>Media (optional)</ControlLabel> 
 
     <input 
 
     name={ linkName } 
 
     value={ linkValue } 
 
     className="form-control" 
 
     placeholder="Add your media url" 
 
     type="text" 
 
     /> 
 
     <input 
 
     name={ contentName } 
 
     value={ contentValue } 
 
     className="form-control" 
 
     placeholder="Add your media content" 
 
     type="text" 
 
     /> 
 
    </div> 
 
    ); 
 
    } 
 
}

Первый в рендер часть у меня есть:

const mediaFields = this.state.mediaFields.map((Element, index) => { 
 
     return <Element key={ index } index={ index } /> 
 
    })

Это часть моей формы, где он визуализируется:

<div> 
 
    { mediaFields } 
 
    <Button onClick={() => this.add() }>Add media field</Button> 
 
    <Button onClick={() => this.remove() }>Remove media field</Button> 
 
</div>

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

mediaUrls: { "link-0": null, "link-1": null, "link-2": null}, 
 
mediaContents: { "content-0": null, "content-1": null, "content-2": null}

Это немного грязно, но я пытался использовать этот пример чтобы получить его на работу: Example

Я знаю, что первая часть, где я установил linkValue и contentValue, неверна, но как ее исправить?

Я также знаю, что мне еще нужно передать метод onChange для элемента, но это следующий шаг.

UPDATE:

Я думаю, что это было бы чище способ сделать это, но теперь у меня есть другая проблема.

Я создаю массив, в котором я хочу сохранить значения. Я могу прочитать их у ребенка, но как теперь сохранить изменения в родительском? Как я могу прочитать индекс ребенка в родительском, чтобы я мог сохранить его в нужном месте?

class MediaInput extends React.Component { 
 
    render() { 
 
    const linkName = `link${this.props.index}`; 
 
    const contentName = `content${this.props.index}`; 
 

 
    return (
 
     <div> 
 
     <ControlLabel>Media (optional)</ControlLabel> 
 
     <input 
 
     onChange={this.props.handleChange} 
 
     name={ linkName } 
 
     value={ this.props.mediaUrls[this.props.index]} 
 
     className="form-control" 
 
     placeholder="Add your media url" 
 
     type="text" 
 
     /> 
 
     <input 
 
     name={ contentName } 
 
     value={ this.props.mediaContents[this.props.index]} 
 
     className="form-control" 
 
     placeholder="Add your media content" 
 
     type="text" 
 
     /> 
 
    </div> 
 
    ); 
 
    } 
 
}

Мое состояние:

 mediaUrls: [ '', '', ''], 
 
     mediaContents: ['', '', ''],

Как следует моя handleChange функция взгляд, если я хочу, чтобы SetState каждый раз, когда входные изменения? Я хочу прочитать индекс и изменить его на основе этого.

// Handle media fields 
 

 
    handleChange(e){ 
 
    const mediaUrls = this.state.mediaUrls; 
 
    // based on the index, change the value in the array 
 

 

 
    this.setState({ ??? }); 
 
    }

Answer 1

Чтобы получить индекс к родительскому для обновления, просто передать его в функцию обратного вызова.

class MediaInput extends React.Component { 
    // ... 
    render() { 
    return (
     <div> 
     <ControlLabel>Media (optional)</ControlLabel> 
     <input 
     onChange={(event) => this.props.handleChange(event, this.props.index)} /> 

When dealing state in React, treat it as immutable.

handleChange(e, index) { 
    // Shallow copy of array 
    const mediaUrls = this.state.mediaUrls.slice(); 
    mediaUrls[index] = e.target.value; 
    this.setState({mediaUrls: mediaUrls}); 
});