Question

我正在构建一个页面来创建帖子，用户可以在其中选择多个类别，

我在通过带有多个类别对象的发布请求发送数据时遇到了问题，我无法在单个对象中收集多个类别ID以与其他数据一起发送。

默认状态

constructor (props){
    super(props);
    this.state = {
        title: '',
        menuItems: [],
        shortDescription: '',
        body: RichTextEditor.createEmptyValue(),
        metaDescription: ''
    };
    this.onChangeHandler = this.onChangeHandler.bind(this);
}

关于其他字段的更改处理程序

onChangeHandler = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({
        [name] : value
    })
}

类别更改处理程序，它将返回每个类别ID的新数组对象

categoryChangeHandler = (e, data) => {
    let selectedMenuItems = {
        categoryId: data.value,
    }
    console.log(selectedMenuItems);
}

从api获取类别列表

{this.state.menuItems.map((menuItem) =>
    <Grid.Column key={menuItem.id} width={4}>
        <Checkbox label={menuItem.title} name={menuItem.title} 
        key={menuItem.id} 
        value={menuItem.id}
        onChange={(e, data) => this.categoryChangeHandler(menuItem.key, data)} />
    </Grid.Column>
)}

Answer 1

您可以编写一个单独的复选框更改处理程序，将您所有的复选框值存储在您所在州的一个JSON对象中。

handleCheckBoxChange(e) {
        const tempState = {
            checkboxValues: {
                ...this.state.checkboxValues,
                [e.target.name]: e.target.checked
            }
        }
        this.setState(tempState)
    }

示例： https://jsfiddle.net/69z2wepo/312818/

Answer 2

您需要在您的状态下添加一个新属性来收集复选框数据，例如selectedMenuItems：

    constructor (props){
     super(props);
     this.state = {
        title: '',
        menuItems: [],
        shortDescription: '',
        selectedMenuItems: [], //new property
        body: RichTextEditor.createEmptyValue(),
        metaDescription: ''
     };
     this.onChangeHandler = this.onChangeHandler.bind(this); //you don't need this line as you are using and arrow function
}

然后在更改处理程序中进行以下更改：

categoryChangeHandler = (e) => {
    const name = e.target.name;
    let selectedMenu = this.state.selectedMenuItems;
    selectedMenu[name] = e.target.checked;
    this.setState({
       selectedMenuItems : selectedMenu
    });
}

然后最终像这样调用此处理程序：

{this.state.menuItems.map((menuItem) =>
    <Grid.Column key={menuItem.id} width={4}>
        <Checkbox label={menuItem.title} name={menuItem.title} 
        key={menuItem.id} 
        value={menuItem.id}
        onChange={this.categoryChangeHandler} />
    </Grid.Column>
)}

建议不要在渲染函数中直接使用箭头函数，因为每次渲染组件时都会创建一个新函数。这可能会导致性能问题。

我如何在React的数组json对象中保存多个类别复选框

2 个答案: