Question

我正在通过电话号码添加用户。

提交按钮被禁用，直到输入所有10位数字，这样才能正常工作。当我单击提交按钮并尝试添加具有不同电话号码的新用户时，提交按钮将启用，直到我按下第一个键，然后该按钮再次被禁用，直到其余的9个数字输入到该字段中。 / p>

当我尝试创建componentDidMount功能时，应用程序完全中断。这是我的一些代码：

import React from 'react'
import { Dialog, Button, TextField } from 'material-ui'
import { connect } from 'react-redux'
import { inviteAdminByPhone } from '../db'
import MaskedInput from 'react-text-mask'
import { phoneNumber } from '../masks'
import SpinnerButton from '../components/spinner-button'
import { CircularProgress } from 'material-ui/Progress'

const byId = id => document.getElementById(id)

class AddManagerModal extends React.Component {
  state = {
    disabled: true,
    phone: ''
  }

  componentDidUpdate() {
    if ({ disabled: false && this.state.phone < 10 }) {
      this.checkPhoneFields()
    }
  }

  handleChange = (name, id) => {
    this.setState({
      [name]: document.getElementById(id).value
    })
  }

  PhoneMask = () => {
    return (
      <MaskedInput
        mask={phoneNumber}
        placeholderChar={'\u2000'}
        placeholder="Phone Number"
        id="add-manager-phone"
        className="masked-input"
        onChange={e => {
          this.handleChange('phone', 'add-manager-phone')
          console.log(e.target.value)
          if (e.target.value.replace(/[(.)\s]/g, '').length === 10) {
            this.setState({ disabled: false })
          } else {
            this.setState({ disabled: true })
          }
        }}
      />
    )
  }

  handleOpen = () => {
    this.props.dispatch({
      type: 'ADD_MANAGER_MODAL',
      payload: !this.props.open
    })
  }

  checkPhoneFields = () => {
    if (byId('login-phone').value.replace(/[(.)\s]/g, '').length === 10) {
      this.setState({ disabled: false })
      return
    }
    this.setState({ disabled: true })
  }

  render() {
    const props = this.props
    const show = props.show
    const phone = this.state.phone
    return (
      <div>
        <Dialog open={props.open} onBackdropClick={() => this.handleOpen()}>
          <div className="dialog-padding max-width-300">
            <h3 className="oswald font-light tal mb0">Managers Phone Number</h3>
            <TextField
              value={phone}
              fullWidth
              className="max-width-250"`enter code here`
              InputProps={{ inputComponent: this.PhoneMask }}
            />
          </div>
          <div className="dialog-padding tar">
            <Button
              variant="flat"
              color="secondary"
              onClick={() => this.handleOpen()}
            >
              Cancel
            </Button>
            <SpinnerButton
              id="invite-new-manager"
              variant="raised"
              color="primary"
              disabled={this.state.disabled}
              onClick={() =>
                props.addAdmin(
                  byId('add-manager-phone').value,
                  show.eid,
                  'invite-new-manager'
                )
              }
              label="Invite"
            />
          </div>
        </Dialog>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    open: state.addManagerModal,
    show: state.show
  }
}

const mapActionToProps = dispatch => {
  return {
    dispatch,
    addAdmin: (number, event_id, id) =>
      dispatch(inviteAdminByPhone(number, event_id, id))
  }
}

const connector = connect(mapStateToProps, mapActionToProps)

export default connector(AddManagerModal)

Answer 1

似乎禁用变量不存在。应该是this.state.disabled吗？因为我看到你在构造函数中声明了一个。

    componentDidUpdate() 
    {
      if ({ disabled: false && this.state.phone < 10 }) 
      {
        this.checkPhoneFields()
      }
    }

Answer 2

我认为你需要在构造函数中初始化你的状态。这将始终在调用任何生命周期方法之前初始化状态。那时你不应该进行{{1}}调用。

Answer 3

您可能会收到此错误，因为byId无法找到请求的元素（ID为＃34; login-phone＆＃34;）并返回null。

更改componentDidUpdate中的条件，因为当对象转换为布尔值时，对象将被解析为true。

＆＃13;

if ({}){
  console.log("Condition satisfied");
}

if ({disabled: false}){
  console.log("This one too");
}

＆＃13;

我认为你需要这样的东西：

componentDidUpdate() 
{
  if (!this.state.disabled && this.state.phone < 10 ) 
  {
    this.checkPhoneFields()
  }
}

或（如果this.state.phone是字符串，您需要检查其长度）：

componentDidUpdate() 
{
  if (!this.state.disabled && this.state.phone && this.state.phone.length < 10 ) 
  {
    this.checkPhoneFields()
  }
}

ComponentDidMount无效

3 个答案: