Javascript ReactJS-从映射的子组件切换状态或属性？

我正在尝试查看是否可以向多个映射子组件传递一个函数来更改它们的一些道具。交易是，我有一个表示轮班周期的子行，如下所示：

if (this.props.data && this.props.data.length > 0) {
            shiftNodes = this.props.data.map(shift => (
                <ShiftRow key={shift.id} newInd={this.props.isNew} availability={shift.Available} ref={this.ShiftElement}>
                    <td>{shift.Description}</td>
                    <td style={{textAlign: 'center'}}>
                        <input
                            type="checkbox"
                            checked={shift.Available}
                            onChange={this.handleAvailableVal}
                            style={{ width: '1.5em', height: '1.5em'}}
                        />
                    </td>
                    <td style={{ textAlign: 'center' }}>
                        <input readOnly
                            type="checkbox"
                            checked={shift.AllDay}
                            style={{ width: '1.5em', height: '1.5em' }}
                        />
                    </td>
                    {this.determineShiftPeriod(shift)}
                    <td>{(shift.DayOfWeek && shift.ShiftType != 'Daily') ? shift.DayOfWeek : 'N/A (Daily)'}</td>
                </ShiftRow>
            ));
        }

这实际上是子组件代码：

class ShiftRow extends React.Component {
    rawMarkup() {
        var md = createRemarkable();
        var rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
    }

    handleAvailableVal = () => {
        props.onChange(event.target.checked);
    }

    render() {
        return (
            
            <tr className="shift" style={{ backgroundColor: this.props.availability ? 'green' : 'red', color: this.props.availability ? 'white' : 'black'  }}>
                {React.Children.map(this.props.children, (child, i) => {
                    // Ignore the first child
                    return child
                })}

            </tr>


        );
    }
}

类ShiftRow扩展了React.Component{
rawMarkup（）{
var md=createsignific（）；
var rawMarkup=md.render（this.props.children.toString（））；
返回{uuuhtml:rawMarkup}；
}
handleAvailableVal=（）=>{
props.onChange（event.target.checked）；
}
render（）{
返回(
{React.Children.map（this.props.Children，（child，i）=>{
//忽略第一个孩子
返回儿童
})}
);
}
}

其思想是，我希望能够在父移位列表组件中创建移位时传递初始值，这些移位在组件中映射如下：

if (this.props.data && this.props.data.length > 0) {
            shiftNodes = this.props.data.map(shift => (
                <ShiftRow key={shift.id} newInd={this.props.isNew} availability={shift.Available} ref={this.ShiftElement}>
                    <td>{shift.Description}</td>
                    <td style={{textAlign: 'center'}}>
                        <input
                            type="checkbox"
                            checked={shift.Available}
                            onChange={this.handleAvailableVal}
                            style={{ width: '1.5em', height: '1.5em'}}
                        />
                    </td>
                    <td style={{ textAlign: 'center' }}>
                        <input readOnly
                            type="checkbox"
                            checked={shift.AllDay}
                            style={{ width: '1.5em', height: '1.5em' }}
                        />
                    </td>
                    {this.determineShiftPeriod(shift)}
                    <td>{(shift.DayOfWeek && shift.ShiftType != 'Daily') ? shift.DayOfWeek : 'N/A (Daily)'}</td>
                </ShiftRow>
            ));
        }

if（this.props.data&&this.props.data.length>0）{
shiftNodes=this.props.data.map（shift=>(
{shift.Description}
{this.determineShiftPeriod（shift）}
{（shift.DayOfWeek&&shift.ShiftType！=“每日”）？shift.DayOfWeek:“不适用（每日）”}
));
}

有没有一种方法可以像这样一行一行地更改道具，这样我就可以说，将这全套以shift表示的行传递到数据库？如果我能澄清什么，请告诉我

示例：我希望能够单击“可用”复选框，并观察该行的道具值仅更新该行，然后将该行与其他行一起保存。

是，

setState（）

函数（或调用该函数的匿名函数）可以传递给子组件，以便它们可以修改父状态，并通过这样做间接修改它们的道具。大概是这样的：

if (this.props.data && this.props.data.length > 0) {
            shiftNodes = this.props.data.map(shift => (
                <ShiftRow key={shift.id} newInd={this.props.isNew} availability={shift.Available} ref={this.ShiftElement}>
                    <td>{shift.Description}</td>
                    <td style={{textAlign: 'center'}}>
                        <input
                            type="checkbox"
                            checked={shift.Available}
                            onChange={this.handleAvailableVal}
                            style={{ width: '1.5em', height: '1.5em'}}
                        />
                    </td>
                    <td style={{ textAlign: 'center' }}>
                        <input readOnly
                            type="checkbox"
                            checked={shift.AllDay}
                            style={{ width: '1.5em', height: '1.5em' }}
                        />
                    </td>
                    {this.determineShiftPeriod(shift)}
                    <td>{(shift.DayOfWeek && shift.ShiftType != 'Daily') ? shift.DayOfWeek : 'N/A (Daily)'}</td>
                </ShiftRow>
            ));
        }

类ParentComponent扩展了React.Component{ ... updateState=args=>this.setState（args）； render（）{ return（this.updateState（）}> ); } } 也许您可以这样做：

<input
 type="checkbox"
 checked={shift.Available}
 onChange={(evt) => this.handleAvailableVal({evt, shift})} // this way you'll have access to both shift and evt
 style={{ width: '1.5em', height: '1.5em'}}
/>

this.handleAvailableVal（{evt，shift}）}//这样您就可以访问shift和evt了
样式={{宽度：'1.5em'，高度：'1.5em'}}
/>

---

祝你好运…

使用类似的方法修改儿童道具。希望这有帮助

功能其他组件（道具）{
控制台日志（“道具”，道具）；
返回另一个组件；
}
功能T（道具）{
const newChildren=React.Children.map（props.Children，（child，i）=>{
//忽略第一个孩子
返回。克隆元素(
小孩
{
新建议1:1，
新道具2:2，
},
儿童、道具、儿童
);
});
返回{newChildren}；
}
函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
ReactDOM.render(
,
document.getElementById（“根”）
);

非常感谢您的回答。不幸的是，我想还有更多的东西需要我去弄清楚，这只是为了让我开始，因为我在Chrome浏览器控制台中收到了这样一条消息“this.handleAvailableVal不是一个函数”，但我可以将该函数传递到子组件中的特定行吗@阿卡什似乎试图提供一些我特别想要的东西，但似乎还有更多的谜题需要我去解决。见鬼，鉴于我在该字段中的绿色度更高，我可能使用了错误的词。是否认为单击元素会将值更改为1和2之间的切换？只是确定我跟着。我试着把它放在代码播放笔中，只看到静态文本，可能只是没有把两个和两个放在一起。你是在要求newProp1和newProps2吗。这些只是一个例子。你可以有自己的特殊道具。啊，你是说我可以通过cloneElement函数传递道具，然后通过映射发生的元素内部的方法间接更新它们？是的。试一试，然后看看这是否是你所期待的。最好的办法就是试试看好吧，我玩了一些。我注意到，当使用cloneElement并将其放入我的ShiftRow组件中时，只有当我从ShiftRow状态中创建的作为复选框值真实性来源的额外值更改值时，复选框才会更新。有没有一种方法可以将此应用于上游的可变数据？