javascript - this.handleChange.bind(this) 和渲染使用

Question

我从 react bootstrap 网站 https://react-bootstrap.github.io/components/forms/得到了这段代码 我想知道代码中以下内容的使用

• this.handleChange = this.handleChange.bind(this)
• 使valuein 为this.state = { value: '' }; }
  空的使用
• 设置validationState属性的使用validationState={this.getValidationState()}

• 以及设置两个渲染的使用，为什么不只是一个渲染，是否可以设置多个渲染

      class FormExample extends React.Component {
      constructor(props, context) {
      super(props, context);
      this.handleChange = this.handleChange.bind(this);
  
       this.state = {
     value: ''
     };
     }
  
     getValidationState() {
     const length = this.state.value.length;
     if (length > 10) return 'success';
     else if (length > 5) return 'warning';
     else if (length > 0) return 'error';
      return null;
      }
  
      handleChange(e) {
      this.setState({ value: e.target.value });
      }
  
       render() {
       return (
       <form>
       <FormGroup
       controlId="formBasicText"
    validationState={this.getValidationState()}
  >
    <ControlLabel>Working example with validation</ControlLabel>
    <FormControl
      type="text"
      value={this.state.value}
      placeholder="Enter text"
      onChange={this.handleChange}
    />
    <FormControl.Feedback />
    <HelpBlock>Validation is based on string length.</HelpBlock>
  </FormGroup> </form>
      );
      }
      }
  
  render(<FormExample />);
  

标签： javascriptreactjsecma

Answer 1

1. this.handleChange = this.handleChange.bind(this): 这是为了让你可以在 handlechange() 中使用变量“this”
2. 通过设置一个空白值，如果您尝试在没有设置值的情况下引用它，该键将来不会为空
3. validationState 作为属性传递给 FormGroup
4. 渲染不在同一个类中，因此 FormExample 正在由它之外的其他东西渲染。

希望有帮助