Question

我是React的新手，正在研究React JS应用程序。我需要根据数组中的一组值将一些复选框设置为默认复选框。域值集在另一个数组中。

试图通过array.map()的嵌套循环来完成任务
另外，尝试在单个循环内创建回调函数，并尝试使用数组过滤。他们都无法正常工作：

// Set of possible check box values ( file: person.jsx )
Domain=[
     { id:0, name:"apple", value:"Apple" },
     { id:1, name:"orange", value:"Orange"  },
     { id:2, name:"banana", value:"Banana"  },
     { id:3, name:"rGrape", value:"Red grapes"  },
     { id:4, name:"gGrape", value:"Green grapes"  },
]


// a single user's preferences ( file: person.jsx )
state={
    userid:0, 
    name:"Tom",
    gender:"Male",
    age:20,
    fruits:["apple", "rGrape"] 
}

在render（）内部实现的部分代码：

// ( file: person.jsx , inside render() )
{ 
this.Domain.map( 
    (fruit, index) => (
        //console.log();
        <p>
            <li key={fruit.id}>  
                <input type="checkbox" 
                    defaultChecked=
                    { //false //if set to false all unchecked
                        this.state.fruits.map(
                            (stateFruit) =>( 
                                 if(fruit.name === stateFruit)
                                        return true;
                                 else
                                        console.log(false);
                                 console.log(fruit.name === stateFruit)
                            )
                        )
                    } 
                    onChange={this.handleChangeChk} /> {fruit.value}
            </li>
        </p>
    )
)
}

我希望这只会检查用户选择的水果，但会选中每个复选框。如果有人可以建议一种完成此任务的方法，或者采用其他方法，那就太好了。

Answer 1

您实际上要检查水果数组是否包含名称：

this.state.fruits.includes(fruit.name)

Answer 2

您可以通过使用JavaScript includes或contains

来实现。

{ 
this.Domain.map( 
    (fruit, index) => (
        //console.log();
        <p>
            <li key={fruit.id}>  
                <input type="checkbox" 
                    defaultChecked=
                    { //false //if set to false all unchecked
                        this.state.fruits.includes(fruit.name)
                    } 
                    onChange={this.handleChangeChk} /> {fruit.value}
            </li>
        </p>
    )
)
}

Answer 3

在您的情况下，map返回的布尔数组始终设置为true，您需要使用includes返回单个布尔值

{ 
this.Domain.map( 
    (fruit, index) => (
        //console.log();
        <p>
            <li key={fruit.id}>  
                <input type="checkbox" 
                    defaultChecked=
                    {
                        this.state.fruits.includes(fruit.name)
                    } 
                    onChange={this.handleChangeChk} /> {fruit.value}
            </li>
        </p>
    )
)
}

有关更多详细信息，请检查includes和map

React JS如何基于一组检查值来使一些复选框处于选中状态

3 个答案: