Android 谁有动态添加多个RadioGroup 并获取所有RadioGroup被选中的值的方法？

Posted 2023-05-10

需求是 动态生成了多个RadioGroup
每个RadioGroup也都setid了 现在的问题是 怎么获取 所有的RadioGroup 被选中的RadioButton？

参考技术A private void setListenerForView()

//选择radio

selectRadioBtn();

//库内上水的监听事件

radioGroup.setOnCheckedChangeListener(new
RadioGroup.OnCheckedChangeListener()
@Override

public void onCheckedChanged(RadioGroup
group, int checkedId) selectRadioBtn();



);



private void selectRadioBtn()

radioButton =
(RadioButton)findViewById(radioGroup.getCheckedRadioButtonId());

waterIn =
radioButton.getText().toString();

Log.i("radio",
waterIn);

参考技术B

参考技术C 监听RadioButton的状态，如果被选中了，然后getRadioButtonID追问

怎么获取 所有的RadioGroup 被选中的RadioButton？
而不是一个！

参考技术D 循环阿判断阿！追问

知道循环判断 但是问题是方法还不知道怎么用！ onCheckedChanged 里我想了好多种方式 都不成功！

追答

集合学过没有？

追问

劳驾高人给粘下damo！    
本地之前这样用的

Reactjs：如何从父级修改动态子组件状态或道具？

【中文标题】Reactjs：如何从父级修改动态子组件状态或道具？

【英文标题】：Reactjs: how to modify dynamic child component state or props from parent?

【发布时间】：2014-10-09 18:17:20

【问题描述】：

我实际上是在尝试让标签页做出反应，但有一些问题。

这是文件page.jsx

<RadioGroup>
    <Button title="A" />
    <Button title="B" />
</RadioGroup>

当您点击按钮 A 时，RadioGroup 组件需要取消选择按钮 B。

“选定”仅表示来自状态或属性的类名

这里是RadioGroup.jsx：

module.exports = React.createClass(

    onChange: function( e ) 
        // How to modify children properties here???
    ,

    render: function() 
        return (<div onChange=this.onChange>
            this.props.children
        </div>);
    

);

Button.jsx 的来源并不重要，它有一个常规的 HTML 单选按钮，可以触发原生 DOM 的 onChange 事件

预期流量为：

点击按钮“A” 按钮“A”触发 onChange，本机 DOM 事件，它会冒泡到 RadioGroup RadioGroup onChange 监听器被调用

RadioGroup 需要取消选择按钮 B

。这是我的问题。

这是我遇到的主要问题：我无法将<Button>s 移动到RadioGroup，因为它的结构使得孩子们任意 .也就是说，标记可以是

<RadioGroup>
    <Button title="A" />
    <Button title="B" />
</RadioGroup>

或

<RadioGroup>
    <OtherThing title="A" />
    <OtherThing title="B" />
</RadioGroup>

我已经尝试了一些方法。

尝试：在RadioGroup的 onChange 处理程序中：

React.Children.forEach( this.props.children, function( child ) 

    // Set the selected state of each child to be if the underlying <input>
    // value matches the child's value

    child.setState( selected: child.props.value === e.target.value );

);

问题：

Invalid access to component property "setState" on exports at the top
level. See react-warning-descriptors . Use a static method
instead: <exports />.type.setState(...)

---

尝试：在RadioGroup的 onChange 处理程序中：

React.Children.forEach( this.props.children, function( child ) 

    child.props.selected = child.props.value === e.target.value;

);

问题：什么也没发生，即使我给Button 类一个componentWillReceiveProps 方法

---

尝试：我尝试将父级的某些特定状态传递给子级，因此我可以更新父级状态并让子级自动响应。在 RadioGroup 的渲染函数中：

React.Children.forEach( this.props.children, function( item ) 
    this.transferPropsTo( item );
, this);

问题：

Failed to make request: Error: Invariant Violation: exports: You can't call
transferPropsTo() on a component that you don't own, exports. This usually
means you are calling transferPropsTo() on a component passed in as props
or children.

---

错误的解决方案 #1：使用 react-addons.js cloneWithProps 方法在 RadioGroup 的渲染时克隆子级，以便能够传递属性

糟糕的解决方案#2：围绕 HTML / JSX 实现一个抽象，以便我可以动态传递属性（杀了我）：

<RadioGroup items=[
     type: Button, title: 'A' ,
     type: Button, title: 'B' 
]; />

然后在RadioGroup 中动态构建这些按钮。

This question 对我没有帮助，因为我需要在不知道他们是什么的情况下渲染我的孩子

【问题讨论】：

如果孩子可以是任意的，那么RadioGroup 怎么可能知道它需要对其任意孩子的事件做出反应？它必须对它的孩子有所了解。

一般来说，如果你想修改不属于你的组件的属性，请使用React.addons.cloneWithProps 克隆它并传递你希望它拥有的新属性。 props 是不可变的，因此您正在创建一个新哈希，将其与当前道具合并，并将新哈希作为 props 传递给子组件的新实例。

【参考方案1】：

创建一个对象，充当父子之间的中间人。此对象包含父和子中的函数引用。然后将该对象作为道具从父级传递给子级。这里的代码示例：

https://***.com/a/61674406/753632

【参考方案2】：

按钮应该是无状态的。无需显式更新按钮的属性，只需更新组自己的状态并重新渲染。 Group 的渲染方法应该在渲染按钮时查看其状态，并将“活动”（或其他内容）仅传递给活动按钮。

【讨论】：

要展开，按钮 onClick 或其他相关方法应从父级设置，以便任何操作回调到父级以在那里设置状态，而不是在按钮本身中设置状态。这样，按钮只是父母当前状态的无状态表示。

【参考方案3】：

也许我的解决方案很奇怪，但为什么不使用观察者模式呢？

RadioGroup.jsx

module.exports = React.createClass(
buttonSetters: [],
regSetter: function(v)
   buttonSetters.push(v);
,
handleChange: function(e) 
   // ...
   var name = e.target.name; //or name
   this.buttonSetters.forEach(function(v)
      if(v.name != name) v.setState(false);
   );
,
render: function() 
  return (
    <div>
      <Button title="A" regSetter=this.regSetter onChange=handleChange/>
      <Button title="B" regSetter=this.regSetter onChange=handleChange />
    </div>
  );
);

Button.jsx

module.exports = React.createClass(

    onChange: function( e ) 
        // How to modify children properties here???
    ,
    componentDidMount: function() 
         this.props.regSetter(name:this.props.title,setState:this.setState);
    ,
    onChange:function() 
         this.props.onChange();
    ,
    render: function() 
        return (<div onChange=this.onChange>
            <input element .../>
        </div>);
    

);

也许你需要别的东西，但我发现这个非常强大，

我真的更喜欢使用为各种任务提供观察者注册方法的外部模型

【讨论】：

一个节点在另一个节点上显式调用 setState 是不是很糟糕？更被动的方式是更新 RadioGroup 上的某些状态，触发另一个渲染通道，您可以在其中根据需要更新后代的道具？

明确？不，观察者只是调用一个回调，它恰好是 setState，但实际上我可以指定 this.setState.bind(this) 并因此专门绑定到自身。好吧，如果我不得不说实话，我应该定义一个调用 setState 的本地函数/方法并在观察者中注册它

我读错了，还是Button.jsx 的一个对象中有两个同名字段？

Button.jsx 包括 onChange() 和 onChange(e)

删除第一个，它是从问题（第一个问题）中剪切和粘贴。这不是重点，这不是一个有效的代码，也不是。

【参考方案4】：

我不知道你为什么说使用cloneWithProps 是一个糟糕的解决方案，但这里有一个使用它的工作示例。

var Hello = React.createClass(
    render: function() 
        return <div>Hello this.props.name</div>;
    
);

var App = React.createClass(
    render: function() 
        return (
            <Group ref="buttonGroup">
                <Button key=1 name="Component A"/>
                <Button key=2 name="Component B"/>
                <Button key=3 name="Component C"/>
            </Group>
        );
    
);

var Group = React.createClass(
    getInitialState: function() 
        return 
            selectedItem: null
        ;
    ,

    selectItem: function(item) 
        this.setState(
            selectedItem: item
        );
    ,

    render: function() 
        var selectedKey = (this.state.selectedItem && this.state.selectedItem.props.key) || null;
        var children = this.props.children.map(function(item, i) 
            var isSelected = item.props.key === selectedKey;
            return React.addons.cloneWithProps(item, 
                isSelected: isSelected,
                selectItem: this.selectItem,
                key: item.props.key
            );
        , this);

        return (
            <div>
                <strong>Selected:</strong> this.state.selectedItem ? this.state.selectedItem.props.name : 'None'
                <hr/>
                children
            </div>
        );
    

);

var Button = React.createClass(
    handleClick: function() 
        this.props.selectItem(this);
    ,

    render: function() 
        var selected = this.props.isSelected;
        return (
            <div
                onClick=this.handleClick
                className=selected ? "selected" : ""
            >
                this.props.name (this.props.key) selected ? "<---" : ""
            </div>
        );
    

);


React.renderComponent(<App />, document.body);

这是一个jsFiddle 展示它的实际应用。

编辑：这是一个更完整的动态标签内容示例：jsFiddle

【讨论】：

注意：不推荐使用 cloneWithProps。改用 React.cloneElement。

这对于 D3/Jquery 可以通过 this 上的 :not 选择器来完成的事情非常复杂。除了使用 React 之外，还有什么真正的优势吗？

仅供参考。这不是“从父状态更新子状态”，这是子更新父状态以更新子状态。这里的措辞有所不同。以防这让人们感到困惑。

@Incodeveritas 你是对的，兄弟关系，父子关系，子父子关系有点复杂。这是一种模块化的做事方式。但请记住，JQuery 是一种快速完成工作的方法，ReactJS 根据编排来保持工作。