Question

我是React js的新手。任何人都可以告诉我，如何将复选框的值抓取到包含文本字段的另一个组件中？我在checkedBox的控制台中获得了这些值。我尝试了https://jsfiddle.net/r7dm7wo0/ MenuList.js

const items = [
  'one',
  'two',
  'three'
];

class MenuList extends React.Component {
    componentWillMount () {
        this.selectedCheckboxes = new Set();
    }

    toggleCheckbox = (label) => {
        if (this.selectedCheckboxes.has(label)) {
          this.selectedCheckboxes.delete(label);
        } else {
          this.selectedCheckboxes.add(label);
        }
    }

    handleFormSubmit = (formSubmitEvent) => {
        formSubmitEvent.preventDefault();
        var checkedBox = new Set([...this.selectedCheckboxes].map(function(item){
            return(item);
         }));
            console.log(checkedBox)

         <MenuItem items={this.checkedBox}/>
    }

    createCheckbox = (label) => (
        <Checkbox
          label={label}
          handleCheckboxChange={this.toggleCheckbox}
          key={label}
        />
    )

    createCheckboxes = () => (
        items.map(this.createCheckbox)
    )

    render() {
        return (
            <div className="background">
                <div className="checkboxForm">              
                    <div className=" col-lg-12">
                        <div className="col-lg-6 floatLeft">
                            <form onSubmit={this.handleFormSubmit}>
                                {this.createCheckboxes()}
                                <button className="btn btn-default" type="submit">Save</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

MenuItem.js

class MenuItem extends React.Component {
        render() {
          const { items } = this.props
            return(
                <div>
                    <textarea>{items}</textarea>
                </div>
            )
        }
    }

    MenuItem.propTypes = {
        checkbox: PropTypes.string
    }

index.js

ReactDOM.render(
  <Router history={hashHistory}>
        <Route path="/" component={IndexPage}/>
        <Route path="login" component={LoginForm}/>
        <Route path="menu-list" component={MenuList}/>
        <Route path="menu-item" component={MenuItem}/>
    </Router>
);

Answer 1

如果您有通过多个页面共享的数据，则必须将信息保存在某处。你可以保存它：

服务器端：用于同步多个设备上的多个页面但您是服务器数据库
in cookies或forages：即使在关闭浏览器后，也可以在浏览器标签之间共享数据并保持活动状态。
处于应用程序状态：对与当前应用程序相关的数据有用，并在重新加载页面或关闭浏览器时删除。它通常用于像React这样的单个应用程序

在您的情况下，我认为您需要一个应用程序状态。我建议您使用Redux的works fine with React。

稍后，您将能够从服务器加载数据并填写应用程序状态，以使您的所有页面都可以访问已加载的信息。

如果您拥有通过同一页面中的多个组件共享的数据，则需要使用React state。

将选中的复选框值返回给包含文本字段的另一个React组件

1 个答案: