Question

所以我想将这段代码简化为一个简单的for循环。但是UITextFields和UILabels给了我一些麻烦。

import React, { Component } from "react";

class Book extends React.Component {
  render() {
    return (
      <div className="book">
        <div className="book-top">
          <div
            className="book-cover"
            style={{
              height: 192,
              width: 128,
              backgroundImage:
                "url(" + this.props.book.imageLinks.thumbnail + ")"
            }}
          />
          <div className="book-shelf-changer">
            <select
              value={this.props.book.shelf}
              onChange={event => {
                this.props.updateShelf(event, this.props.book);
              }}
            >
              <option value="" disabled>
                Move to...
              </option>
              <option value="currentlyReading">Currently Reading</option>
              <option value="wantToRead">Want to Read</option>
              <option value="read">Read</option>
              <option value="none">None</option>
            </select>
          </div>
        </div>
        <div className="book-title">{this.props.book.title}</div>
        <div className="book-authors">{this.props.book.authors}</div>
      </div>
    );
  }
}

export default Book;

import React from "react";
import { Route, Link, BrowserRouter } from "react-router-dom";
import * as BooksAPI from "./BooksAPI";
import Search from "./Search";
import "./App.css";
import BooksList from "./BooksList";

/* eslint-disable */
class BooksApp extends React.Component {
  state = {
    books: []
  };

  updateShelf = (event, book) => {
    BooksAPI.update(book, event.target.value).then(result => {
      BooksAPI.getAll().then(books => {
        this.setState({ books: books });
      });
    });
  };

  componentDidMount() {
    BooksAPI.getAll().then(books => {
      this.setState({ books: books });
    });
  }

  render() {
    return (
      <BrowserRouter>
        <div className="app">
          <Route
            path="/search"
            render={() => <Search updateShelf={this.updateShelf} />}
          />

          <Route
            exact
            path="/"
            render={({ history }) => (
              <BooksList
                books={this.state.books}
                updateShelf={this.updateShelf}
              />
            )}
          />
          <div className="open-search">
            <Link className="" to="/search">
              Search a book
            </Link>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

export default BooksApp;

import React from "react";
import { Route, Link } from "react-router-dom";
import Shelf from "./BookShelf";
import "./App.css";

/* eslint-disable */
class BooksList extends React.Component {
  state = {
    bookShelfs: [
      { id: "currentlyReading", title: "Currently Reading" },
      { id: "wantToRead", title: "Want to Read" },
      { id: "read", title: "Read" }
    ]
  };

  getBooksByFilterShelf = shelf => {
    return this.props.books.filter(book => shelf.id === book.shelf);
  };

  render() {
    return (
      <div className="list-books">
        <div className="list-books-title">
          <h1>MyReads</h1>
        </div>
        <div className="list-books-content">
          <div>
            {this.state.bookShelfs.map(shelf => (
              <Shelf
                key={shelf.id}
                shelf={shelf}
                books={this.getBooksByFilterShelf(shelf)}
                updateShelf={this.props.updateShelf}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default BooksList;

像这样...

    @IBOutlet var thingsIUse: UITextField!
    @IBOutlet var orThis: UILabel!

    saveProgress(year: year, season: season, day: "1", value: "\(Int(day1new.text!)! + Int(day1newExtra.text!)!)")
    saveProgress(year: year, season: season, day: "2", value: "\(Int(day2new.text!)! + Int(day2newExtra.text!)!)")
    saveProgress(year: year, season: season, day: "3", value: "\(Int(day3new.text!)! + Int(day3newExtra.text!)!)")
    saveProgress(year: year, season: season, day: "4", value: "\(Int(day4new.text!)! + Int(day4newExtra.text!)!)")
    saveProgress(year: year, season: season, day: "5", value: "\(Int(day5new.text!)! + Int(day5newExtra.text!)!)")
    saveProgress(year: year, season: season, day: "6", value: "\(Int(day6new.text!)! + Int(day6newExtra.text!)!)")
    saveProgress(year: year, season: season, day: "1Taki", value: day1new.text!)
    saveProgress(year: year, season: season, day: "2Taki", value: day2new.text!)
    saveProgress(year: year, season: season, day: "3Taki", value: day3new.text!)
    saveProgress(year: year, season: season, day: "4Taki", value: day4new.text!)
    saveProgress(year: year, season: season, day: "5Taki", value: day5new.text!)
    saveProgress(year: year, season: season, day: "6Taki", value: day6new.text!)

有什么建议吗？

Answer 1

您可以通过几种方法解决此问题。一种是使用IBOutlet集合。迅速地将它们定义为：

@IBOutlet var dayLabels: [UILabel]!

然后，请确保您进入Xib / Storyboard，并通过单击收集名称旁边的小“ +”并将其拖动到各个标签来添加对标签的引用。由于这是一个集合，因此您可以像这样将其拖动到许多标签上，只需确保以要更新它们的顺序添加它们即可。

解决此问题的另一种方法是创建要在运行时动态更新的标签数组，如下所示：

let labelsToUpdate: [UILabel] = [day1new,day2new,day3new,day4new,day5new,day6new]
for k in 0...5 {
    let day = "\(k+1)"
    let label = labelsToUpdate[k]
    ...
}

您还可以进行其他几种优化来保持代码干净，但这将是实现所需目标的良好开端。

祝你好运！

快速在每个循环中更改不同的标签labelData

1 个答案: