草庐IT

javascript - reactjs-toolbox 单选按钮组不改变

coder 2025-01-10 原文

在我的 React 应用程序中，我使用带有此代码的单选按钮:

 <RadioGroup name='steptype' className={css.ProcessStepRadioButtons} value={this.state.stepsData[stepNumber].stepType}
                                onChange={(value, event) => {
                                    this.changeInputOptionHandlerProcessStep(value, "stepType", stepNumber)
                                }}>
                        <RadioButton label={<T value='processes.new.processStepTypeDuty'/>} value={1} />
                        <RadioButton label={<T value='processes.new.processStepTypeVariable'/>} value={2}/>
                        <RadioButton label={<T value='processes.new.processStepTypeOptioanal'/>} value={3}/>
                    </RadioGroup>

和这个处理程序:

export function changeInputOptionHandlerProcessStep(value, field, step) {
this.setState((prevState) => ({
    stepsData: prevState.stepsData.map((currentStep, i) => {
        if (i === step) {
            return {
                ...currentStep,
                [field]: value
            }
        }
        return currentStep
    })
}), () => {
    console.log("New state in ASYNC callback:", this.state.stepsData);
} );
}

状态设置正确，但单选按钮没有视觉切换，

在这种情况下可能是什么问题？

谢谢

更新 this.state.stepsData 的控制台日志

在渲染之前更新 this.state.stepsData 的控制台日志

最佳答案

您的状态设计似乎不适合 RadioGroup组件。

这是一个 controlled component在幕后，所以选择的单选按钮始终由 RadioGroup 强加。的 value支柱。我不知道你是如何初始化组件的(意思是默认选择)，但是它的 value应始终属于 value 之一s单RadioButton组件，意思是this.state.stepsData[stepNumber].stepType应该是 1、2 或 3。

stepType对我来说(在这里做出假设)更像是一个字符串而不是一个数字，所以可能是初始化错误，组件会自动使用第一个单选按钮作为默认选择。

考虑到这一点，您控制这组单选按钮的子状态应该是一个数字(1、2 或 3)。然后，你的处理程序 changeInputOptionHandlerProcessStep将接收新选择(新数字)作为第一个参数，您只需使用新值设置状态即可。它会是这样的:

<RadioGroup 
    name='steptype' 
    className={css.ProcessStepRadioButtons} 
    value={this.state.stepNumber} // initialised to 1, 2 or 3
    onChange={(value, event) => {this.changeInputOptionHandlerProcessStep(value, "stepType", stepNumber)}}
>
    <RadioButton label={<T value='processes.new.processStepTypeDuty'/>} value={1} />
    <RadioButton label={<T value='processes.new.processStepTypeVariable'/>} value={2}/>
    <RadioButton label={<T value='processes.new.processStepTypeOptioanal'/>} value={3}/>
</RadioGroup>

function changeInputOptionHandlerProcessStep(newValue) {
     this.setState({ stepNumber: newValue });
}

让我知道这是否适合您。

关于javascript - reactjs-toolbox 单选按钮组不改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44413021/

reactjs-toolboxjavascriptvaluecodechangeInputOptionHandlerProcessStreactjsreact-toolbox

有关javascript - reactjs-toolbox 单选按钮组不改变的更多相关文章

  1. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  4. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St

  5. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby - 按 Enter 键而不是用鞋子单击按钮(Ruby) - 2

    正如标题所暗示的那样，我只是在寻找一种无需单击即可按下Shoes中的按钮的方法。我已经搜索了论坛，但不幸的是找不到任何东西。谢谢 最佳答案 这在Windows下的红色鞋子中不起作用，因为Windows控件窃取了所有事件。不过，我设法在window下穿着绿鞋工作。举个例子['green_shoes'].each(&method(:require))Shoes.app{e=edit_linebutton("Clickme!"){alert("Youclickedme.")}keypress{|k|alert("YoupressedEnt

  10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

随机推荐