javascript - 多级选择输入

Question

我认为一个例子最能说明我的问题。假设我有一个表格来选择书籍及其页面。用户将有一个多选下拉菜单来选择书籍。然后，从每本书中，用户可以选择任意数量的页面。最后，数据看起来像一个二维数组。顶层是选择的书籍数组，第二层是每本书选择的页数:

books: {
  "Book 1": ["page1", "page2", "page3"],
  "Book 2": ["page1", "page2"]
}

书籍的下拉列表将自动填充。用于选择书籍页面的下拉选项将在加载时填充。

这是一个硬编码示例，仅用于查看基本布局:http://codepen.io/alanqthomas/pen/JbVGzW?editors=1000

我在 React 中这样做。我想不出在组件状态中设置这些值并动态显示它们的方法。我正在使用 react-select用于多选选择输入。

Answer 1

当然。这就是你想要的。因为你想要在书中嵌套页面，所以我所做的 setState 将需要修改，但这是你的开始。

如果您需要帮助，请直接提出。

class Form extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
        <form>
           <div>
            <Books />
          </div>
        </form>
        );
    }
}

class Books extends React.Component {
    constructor() {
        super();

        this.state = {
            books: {
              Book1: {
                pages: [
                {
                    text: Page 1,
                    value: Page1
                },
                {
                    text: Page 2,
                    value: Page2
                }],
                text: Book 1,
                value: Book1
              },
              Book2: {
                pages: [
                {
                    text: Page 1,
                    value: Page1
                },
                {
                    text: Page 2,
                    value: Page2
                }],
                text: Book 2,
                value: Book2
              }
            }
        }
        this.state.currentBookKey = this.state.books.Book1.value;
    }
    selectOnChange = (event) => {
        this.setState((state) => ({ currentBookKey: event.target.value }))
    }
    render() {
        return (
            <div>
                <label>Book</label>
                <select multiple name="book" onChange={this.selectOnChange}>
                    {this.state.books.map(book => <Book value={book.value}}>{book.text}</Book>)}
                </select>
                <label>Pages to select</label>
                <select multiple name="pages">
                    {this.state.books[this.state.currentBookKey].pages.map(page => <Page value={page.value}}>{page.text}</Page>)}
                </select>
            </div>
        )
    }
}

无状态组件:

//React.children.only gives us an exception if more than one child
const Book = ({children, value}) => (
    <option value={value}>{React.Children.only(children)}</option>
);

const Page = ({children, value}) => (
    <option value={value}>{React.Children.only(children)}</option>
);