Question

此代码对我不起作用，因为我无法使用form.isValid（）做任何事情，因此我只需要显示工具提示和彩色文本字段边框即可向用户显示我不建议使用长度> 15，但是如果他仍然想这样做，那就可以了。

export const query = gql`
    query UserAndData($limit: Int!) {
        user {
            _id,
            nom,
            prenom,
            email,
            isAdmin
        }
        adminCalculations {
            _id,
            lastUpdated,
            comments
        }
        adminUsers {
            _id,
            lastConnect,
            nom,
            prenom,
            email,
            societe
        }
        calculs(limit: $limit) {
            _id,
            userId,
            date,
            duration,
            user {
                email
            }
        }
        count
    }
`

class Admin extends Component {

    state = {
        limit : 100,
    }

    render() {
        return(
            <Query query={query} variables={{ limit : this.state.limit}} fetchPolicy="cache-and-network">
                {({ loading, error, data, fetchMore }) => {
                    if (loading) return <p>Loading...</p>;
                    if (error) return <p>Error</p>;
                    console.log(data);
                    if (!data || (!data.user || !data.user.isAdmin)){
                        return (<Redirect to="/" />)
                    }
                    return(
                        <div className="admin">
  (lot of coding and rendering users list, calculs lists, etc...)

   <div className="bouton" onClick={() => {
       fetchMore({                               
          variables : { limit : this.state.limit + 100 },
          updateQuery : (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prev;
          return Object.assign({}, prev, { calculs : 
          fetchMoreResult.calculs });
      }

                                                })
                                                this.setState({ limit : this.state.limit + 100 })
                                            }
                                                }>Charger plus de calculs</div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }}
                </Query>
            )
        }
    }

export default Admin;

有什么方法可以显示vtype工具提示，颜色边框并且不将文本字段设置为无效？

Answer 1

您可以在文本字段中使用侦听器：

listeners: {
                change: function (c, newValue, oldValue) {
                    var tn = newValue.replace(/[^0-9]/g, '');
                    if (tn.length === 0) {
                        setTimeout(function () {
                            c.markInvalid('Imei length must be at least 1 symbol');
                        }, 100);

                    }
                    if (tn.length > 15) {
                        setTimeout(function () {
                            c.markInvalid('Imei length more than 15 symbols is not recommended');
                        }, 100);
                    }
                }
            },

存在超时，因为基本字段在推送事件后将markInvalid触发为”。

看小提琴上的例子：https://fiddle.sencha.com/#view/editor&fiddle/2r9h

如何显示vtype警告并且不设置字段无效？

1 个答案: