Question

我一直在尝试使用React创建动态。到目前为止，我设法显示和隐藏表单没有问题。我现在需要从创建的字段中获取值，这会导致一些问题。

到目前为止，这是我的代码。

首先，当人们点击按钮时添加我的动态组件：

＆＃13;

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>
    );
  }
}

＆＃13;

首先在渲染部分我有：

＆＃13;

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

＆＃13;

这是我的表单中呈现的部分：

＆＃13;

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

＆＃13;

我想将这些值保存在父组件的状态中：

＆＃13;

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

＆＃13;

它有点乱，但我试图用这个例子让它工作： Example

我知道第一部分，我设置linkValue和contentValue是不正确的，但我该如何解决？

我也知道我仍然需要将onChange方法传递给元素，但这是下一步。

更新

我认为这将是一种更清洁的方式，但现在我有一个不同的问题。

我创建了一个我想存储值的数组。我能够在孩子中阅读它们，但我现在如何在父母中保存更改？如何读取父母中孩子的索引，以便将其保存在正确的位置？

＆＃13;

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>
    );
  }
}

＆＃13;

我的状态：

＆＃13;

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

＆＃13;

如果每次输入更改时我想要setState，我的handleChange函数应如何显示？我想读取索引并根据它更改我的数组。

＆＃13;

// Handle media fields 

  handleChange(e){
    const mediaUrls = this.state.mediaUrls;
    // based on the index, change the value in the array


    this.setState({ ??? });
  }

＆＃13;

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});
});

如何使用react

1 个答案: