Question

我正在使用react-final形式，并使用html的默认输入范围滑块，但是它们运行缓慢且在移动设备上没有响应。在PC上它们的延迟很短，但这不是问题。我怀疑出现了性能问题，但是我不确定。

我已经创建了一个名为Slide的第三方组件，如下所示：

const Slide = ({ input, min, max, label,...rest }) => {

    return <div>
        <label>
            {label}
        </label>
        <div className="slidecontainer">
            <input type="range"
                min={min}
                max={max}
                value={input.value}
                onChange={(event) => { input.onChange(Number(event.currentTarget.value)) }}
                className="slider" 
                step = {500}
                style={{direction:'rtls' , 'width':'100%'}}
                ></input>
        </div>
    </div>
}

我故意避免了Smooth-ui的Range，因为它出于某种原因甚至反应迟钝。

我已尝试按照本教程中所示申请订户，但是出现错误。

我无法显示整个表格，因为它太大了，但是声明如下：


 return <Form
            onSubmit={this.props.onSubmit}
            initialValues={initialValues}
            mutators={{ ...arrayMutators, setFieldData }}
            subscription={{ submitting: true, pristine: true }} // NOTICE
            render={({ handleSubmit, form: { mutators: { push, remove, setFieldData, insert } }, form, submitting, pristine, values }) => {

标记线是从本教程复制的（某种），希望能提高性能，但是会导致错误： TypeError: values is undefined

当我删除标记的行时，一切正常。另外，当我添加 values: true订阅者对象的问题已解决，但据我了解，每次更改字段时表单都会更新，我试图避免这种情况-并且性能问题仍然存在。设置values: false导致TypeError: values is undefined

结论： 1）如何使输入范围滑块在移动设备上正常工作？ 2）如何让我的表单仅订阅实际需要的更改（表单发送和表单清除）？

谢谢！

反应最终形式：没有值的订阅和缓慢的输入范围

0 个答案: