我如何使用 React mozilla 表单创建切换按钮

Question

制作表格

我需要创建一个切换按钮。为此，我使用以下架构和 UiSchema：

const Schema = {
  customCheckboxComponent: {
      type: 'string',
      title: 'toggle button'
  } };

const UISchema = {
  customCheckboxComponent: {
    "ui:widget": (props) => {
        return (            
            <label className="switch">
                <input type="checkbox"  
                className="col-xs-12 custom"
                title={props.title}
                value={props.value}
                onChange={(event) => props.onChange(event.target.value)}/>
                <span className="slider round"/>
            </label>
        );
           };

我正在使用 css 提供 w3Schools :

我未能获取此切换按钮的状态。好像我的切换按钮的状态没有改变！

有人可以帮我解决这个问题吗？

Answer 1

我已经解决了关于更改的问题:

onChange={(event) => props.onChange(event.target.value)}

来自

onClick={() => props.onChange(!props.value)}

我如何使用 React mozilla 表单创建切换按钮

How can i create an toggle button using react mozilla forms

jsonschema

reactjs