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

多级选择输入

1 个答案: