Home>
What i am doing now

Creating a registration form that uses react.js to see if the condition is cleared in real time like an image

Problem

Click on the input part of name and password → Click anywhere else

A component is changing an uncontrolled input of type text to be controlled.Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component .


I get an error
→ https: //stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro

fields: {}
From
fields: {name: '', password: ''}
Change to


There is no error, but characters cannot be entered in the text of name

Code
function PasswordBallon (props) {
      return (
          <div className = "passwordBallon">
            <ul>
                <span className = "title">Password rules</span>
                <li>
                    {(() =>{
                      if (props.NumberOfPassword == true) {
                        return<img src = "../ icon/check-solid.svg" style = {{height: "22px"}} />
                    } Else {
                        return<img src = "../ icon/baseline-error_outline-24px.svg" />
                    }
                    }) ()}
                    {(() =>{
                      if (props.NumberOfPassword == true) {
                        return<span style = {{color: "# E4E7E8"}}> 8 characters minimum</span>
                    } Else {
                        return<span> 8 characters minimum</span>
                    }
                    }) ()}
                </li>
                <li>
                    {(() =>{
                      if (props.CheckNumber == true) {
                        return<img src = "../ icon/check-solid.svg" style = {{height: "22px"}} />
                    } Else {
                        return<img src = "../ icon/baseline-error_outline-24px.svg" />
                    }
                    }) ()}
                    {(() =>{
                      if (props.CheckNumber == true) {
                        return<span style = {{color: "# E4E7E8"}}> Contains at least 1 number</span>
                    } Else {
                        return<span> Contains at least 1 number</span>
                    }
                    }) ()}
                </li>
                <li>
                    {(() =>{
                      if (props.CheckCharacter == true) {
                        return<img src = "../ icon/check-solid.svg" style = {{height: "22px"}} />
                    } Else {
                        return<img src = "../ icon/baseline-error_outline-24px.svg" />
                    }
                    }) ()}
                    {(() =>{
                      if (props.CheckCharacter == true) {
                        return<span style = {{color: "# E4E7E8"}}> Can't be "password", "username"</span>
                    } Else {
                        return<span> Can't be "password", "username"</span>
                    }
                    }) ()}
                </li>
            </ul>
          </div>
      );
  }
  function FormButton (props) {
      return (
          <div>
            <button
                // onClick = {this._sendData}
                // disabled = {props.errors}
                disabled = {props.errors}
            >
              submit
            </button>
          </div>
      );
  }
    class App extends React.Component {
        constructor () {
          super ();
          this.state = {
            display: false,
            fields: {name: '', password: ''}, //https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to- be-controlled-erro
            errors: {},
            buttonDisabled: true,
            PassConfirmDisabled: true,NumberOfPassword: false,
            CheckNumber: false,
            CheckCharacter: false,
          };
          this.passwordClick = this.passwordClick.bind (this);
          this.handleChange = this.handleChange.bind (this);
          this.clickOutside = this.clickOutside.bind (this);
        }

        passwordClick () {
            this.setState ({
              display: true
            });
        }
        handleChange (field, e) {
            let fields = this.state.fields;
            fields [field] = e.target.value;
            this.setState ({fields});

            if (typeof fields ["password"]! = "") {
              if (fields ["password"]. match (/ ^. {8,} $/)) {
                  this.setState ({NumberOfPassword: true});
              } else {
                  this.setState ({NumberOfPassword: false});
              }
              if (fields ["password"]. match (/ [0-9] /)) {
                  this.setState ({CheckNumber: true});
              } else {
                  this.setState ({CheckNumber: false});
              }
              if ((fields ["password"]! = "password")&&(fields ["password"]! = "username")&&(fields ["password"]! = "")) {
                  this.setState ({CheckCharacter: true});
              } else {
                  this.setState ({CheckCharacter: false});
              }
              if (this.state.NumberOfPassword == true&&this.state.CheckNumber == true&&this.state.CheckCharacter == true) {
                this.setState ({PassConfirmDisabled: false})
              } else {
                this.setState ({PassConfirmDisabled: true})
              }
            }
        }
        clickOutside (field, e) {
            let fields = this.state.fields;
            fields [field] = e.target.value;
            this.setState ({fields});
            if (typeof fields ["name"]) {
               if (fields ["name"]. trim () === "") {
                 this.setState ({
                   errors: "name is empty"
                 });
               }
             }
            if (typeof fields ["password"]) {
              this.setState ({
                display: false
              });
            }
        }

        render () {
          return (
            <div className = 'signup'>
              <h1>Create Account</h1>
              <div>
                <input type = "text" name = "name" placeholder = "name"
                    value = {this.state.fields ["name"]}
                    onBlur = {this.clickOutside.bind (this, "name")}
                />
              </div>
              <div><input type = "text" name = "email" placeholder = "email" /></div>
              <div className = "wrapperPassword">
                <input type = "password" name = "password" placeholder = "password"
                    value = {this.state.fields ["password"]}
                    onClick = {this.passwordClick}
                    onChange = {this.handleChange.bind (this, "password")}
                    onBlur = {this.clickOutside.bind (this, "password")}
                />
                {this.state.display?<PasswordBallon
                                        NumberOfPassword = {this.state.NumberOfPassword}
                                        CheckNumber = {this.state.CheckNumber}
                                        CheckCharacter = {this.state.CheckCharacter} /&gt ;: null}
              </div>
              <div><input type = "text" name = "passConfirm" placeholder = "confirm password" disabled = {this.state.PassConfirmDisabled} /></div>
              <FormButton errors = {this.state.errors} />
            </div>
          );
        }
    }
    ReactDOM.render (
      <App /&gt ;,
      document.getElementById ('wrapper')
    );
}) ();
  • Answer # 1

    When embeddingvaluefrom React, it is treated asControlled Component(an element that controls the value from React), andonChangeand reflect it viastateorprops. Otherwise, you will be unable to enter.

    React official explanation

  • Answer # 2

    onBlur's event handler clickOutside uses the tager for event processing,
    There is no target in the FocusEvent property, so I feel it is bad.

    What about taking out e.relatedTarget.value?

    HTML DOM FocusEvent

Related articles