Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Picker在React的Form中死循环 #2654

Open
TuringZhu opened this issue Oct 22, 2024 · 1 comment · Fixed by #2990
Open

Picker在React的Form中死循环 #2654

TuringZhu opened this issue Oct 22, 2024 · 1 comment · Fixed by #2990

Comments

@TuringZhu
Copy link

NutUI React 包名

@nutui/nutui-react

NutUI React 版本号

2.6.14

平台

h5, weapp

重现链接

https://codesandbox.io/p/devbox/dawn-tree-6s2z45

重现步骤

示例代码

import {View} from "@tarojs/components";
import "./index.scss"
import {Cell, Form, Picker, PickerOption} from "@nutui/nutui-react-taro";
import {useState} from "react";
function Index() {
 const  [visible,setVisible] = useState(false);
 const [value,setValue] = useState(0);
  return(
    <View>
      <Form initialValues={{value:1}}>
        <Cell
        title={"title"}
          extra={<div>
          <span onClick={()=>setVisible(true)}>
            {value===1?"111":"222"}
          </span>
            <Form.Item name={"value"} initialValue={1}>
          <Picker
            visible={visible}
            defaultValue={[1]}
            onConfirm={(list:PickerOption[],values:(string|number)[])=>{
              console.log(list,values)
              setVisible(false)
              setValue(values[0] as  number)
            }}
            onCancel={()=>setVisible(false)}
            options={[
            {value:1,text:"11"},
            {value:2,text:"21"}
          ]}
          />
            </Form.Item>
        </div>}/>

      </Form>
    </View>
  )
}

export default Index


### 期望的结果是什么?

没有死循环,不报错

### 实际的结果是什么?

<img width="1274" alt="image" src="https://github.com/user-attachments/assets/66ed5244-7eb1-43cb-a8ad-11b5a8c2a66c">


### 环境信息

> taro info

$ ./node_modules/.bin/taro info
👽 Taro v4.0.6

Taro CLI 4.0.6 environment info:
System:
OS: macOS 12.7.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 20.17.0 - /usr/local/apps/bin/node
Yarn: 1.23.0-20200928.1349 - /usr/local/apps/bin/yarn
npm: 10.8.3 - /usr/local/apps/bin/npm
npmPackages:
@tarojs/cli: 4.0.6 => 4.0.6
@tarojs/components: 4.0.6 => 4.0.6
@tarojs/helper: 4.0.6 => 4.0.6
@tarojs/plugin-framework-react: 4.0.6 => 4.0.6
@tarojs/plugin-html: 4.0.6 => 4.0.6
@tarojs/plugin-platform-alipay: 4.0.6 => 4.0.6
@tarojs/plugin-platform-h5: 4.0.6 => 4.0.6
@tarojs/plugin-platform-jd: 4.0.6 => 4.0.6
@tarojs/plugin-platform-qq: 4.0.6 => 4.0.6
@tarojs/plugin-platform-swan: 4.0.6 => 4.0.6
@tarojs/plugin-platform-tt: 4.0.6 => 4.0.6
@tarojs/plugin-platform-weapp: 4.0.6 => 4.0.6
@tarojs/react: 4.0.6 => 4.0.6
@tarojs/runtime: 4.0.6 => 4.0.6
@tarojs/shared: 4.0.6 => 4.0.6
@tarojs/taro: 4.0.6 => 4.0.6
@tarojs/taro-loader: 4.0.6 => 4.0.6
@tarojs/webpack5-runner: 4.0.6 => 4.0.6
babel-preset-taro: 4.0.6 => 4.0.6
eslint-config-taro: 4.0.6 => 4.0.6
react: ^18.0.0 => 18.3.1


### 其他补充信息

_No response_
@oasis-cloud
Copy link
Collaborator

picker用法参考文档:https://nutui.jd.com/taro/react/2x/#/zh-CN/component/form

<Form.Item
          label="Picker"
          name="picker"
          trigger="onConfirm"
          getValueFromEvent={(...args) => args[1]}
          onClick={(event, ref: any) => {
            ref.open()
          }}
        >
          <Picker options={[pickerOptions]}>
            {(value: any) => {
              return (
                <Cell
                  style={{
                    padding: 0,
                    '--nutui-cell-divider-border-bottom': '0',
                  }}
                  className="nutui-cell--clickable"
                  title={
                    value.length
                      ? pickerOptions.filter((po) => po.value === value[0])[0]
                          ?.text
                      : 'Please select'
                  }
                  extra={<ArrowRight />}
                  align="center"
                />
              )
            }}
          </Picker>
        </Form.Item>

@irisSong irisSong linked a pull request Feb 21, 2025 that will close this issue
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants