javascript - 使用 React 和 Javascript 保存我动态创建的数据的最佳方法是什么？

Question

我一直在努力让我的动态表单发挥作用，但我想知道保存这样生成的数据的最佳做法是什么。

我的解决方案有效，但我感觉还有更好的方法。

目前我将输入字段的两个值保存在一个单独的数组中。但实际上它们属于一起，所以我有一个链接值和一个内容值需要保存。

稍后我需要映射这些值以创建具有存储值的新元素。

我现在的问题是我不知道如何同时映射两个数组。我还想知道是否只创建一个包含所有这些值的对象然后在其上进行映射是否更好。

希望有人能帮帮我。

这是我的代码:

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={(event) => this.props.handleChangeUrl(event, this.props.index)}
        name={ linkName }
        value={ this.props.mediaUrls[this.props.index]}
        className="form-control"
        placeholder="Add your media url. We accept YouTube, Vimeo and SoundCloud links" 
        type="text" 
        />
        <input
        name={ contentName }
        onChange={(event) => this.props.handleChangeContent(event, this.props.index)}
        value={ this.props.mediaContents[this.props.index]}
        className="form-control" 
        placeholder="Add your media content"
        type="text" 
        />
    </div>
    );
  }
}

export default class AddSparkShanghai extends Component {
  constructor(props) {
    super(props);

    this.createSpark = this.createSpark.bind(this);
    this.onChange = this.onChange.bind(this);
    this.handleChangeUrl = this.handleChangeUrl.bind(this);
    this.handleChangeContent = this.handleChangeContent.bind(this);


    this.state ={
      mediaFields: [],
      content: [],
      mediaUrls: [ null, null, null ],
      mediaContents: [ {'', '', ''],
    };
  }

[...]

// Add/remove media fields 

  add() {
    event.preventDefault();
    const mediaFields = this.state.mediaFields.concat(MediaInput);
    if (i < 3) {
      this.setState({ mediaFields });
      i++
    } else {
      Bert.alert('Only 3 media links are allowed', 'danger');
    }
  }

  remove() {
    event.preventDefault();
    const lastElement = this.state.mediaFields.pop();
    const mediaFields = this.state.mediaFields;
    this.setState({ mediaFields });
    i--
  }

// Handle change media fields 

  handleChangeUrl(e, index) {
    // Shallow copy of array
    const mediaUrls = this.state.mediaUrls.slice();
    let url = e.target.value
    if (!/^https?:\/\//i.test(url)) {
      url = 'http://' + url;
    }

    mediaUrls[index] = url;
      this.setState({ mediaUrls});
  }

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

[...]

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

[...]

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

Answer 1

未经测试的代码，但如果您更改以下内容，它应该可以工作:

改变这个:

this.state ={
  mediaFields: [],
  content: [],
  mediaUrls: [ null, null, null ],
  mediaContents: [ {'', '', ''],
};

收件人:

this.state ={
  mediaFields: [],
  content: [],
  data: [],
};

并改变:

handleChangeUrl(e, index) {
  // Shallow copy of array
  const mediaUrls = this.state.mediaUrls.slice();
  let url = e.target.value
  if (!/^https?:\/\//i.test(url)) {
    url = 'http://' + url;
  }

   mediaUrls[index] = url;
   this.setState({ mediaUrls});
}

收件人:

handleChangeUrl(e, index) {
  // Shallow copy of array
  const tempData = this.state.data.slice();
  let url = e.target.value
  if (!/^https?:\/\//i.test(url)) {
    url = 'http://' + url;
  }

  tempData[index].link = url;
  this.setState({ tempData });
}

并改变:

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

收件人:

handleChangeContent(e, index) {
  // Shallow copy of array
  const tempData = this.state.data.slice();
  tempData[index].content = e.target.value;
  this.setState({ tempData });
}

最后:

add() {
  event.preventDefault();
  const mediaFields = this.state.mediaFields.concat(MediaInput);
  if (i < 3) {
    this.setState({ mediaFields });
    i++
  } else {
    Bert.alert('Only 3 media links are allowed', 'danger');
  }
}

remove() {
  event.preventDefault();
  const lastElement = this.state.mediaFields.pop();
  const mediaFields = this.state.mediaFields;
  this.setState({ mediaFields });
  i--;
}

收件人:

add() {
  event.preventDefault();
  const mediaFields = this.state.mediaFields.concat(MediaInput);
  const data = this.state.data.slice();
  data.push({ link: "", content: "" });
  if (i < 3) {
    this.setState({ data, mediaFields });
    i++
  } else {
    Bert.alert('Only 3 media links are allowed', 'danger');
  }
}

remove() {
  event.preventDefault();
  const lastElement = this.state.mediaFields.pop();
  const mediaFields = this.state.mediaFields;
  const data = this.state.data.slice();
  data.pop();
  this.setState({ data, mediaFields });
  i--;
}

注意:已进行编辑以修复最后的大量更改!