程序员经验分享-hwhale

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

2024-02-18

我一直在尝试让我的动态表单正常工作，但我想知道保存这样生成的数据的最佳实践是什么。

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

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

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

我现在遇到的问题是我不知道如何同时映射两个数组。我还想知道用所有这些值创建一个对象然后映射它是否不是更好。

希望有人能帮助我。

这是我的代码：

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>

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

改变这个：

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

To:

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

To:

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

To:

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

To:

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

注意：已被编辑以修复最后的大量更改！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

使用 React 和 Javascript 保存动态创建的数据的最佳方法是什么？ 的相关文章

随机推荐

热门标签