如何使用反应mozilla表单创建切换按钮

Question

我尝试使用react-jsonschema-form

制作表单

我需要创建一个切换按钮。为此，我使用以下Schema和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)}