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 />);

score 3 · Accepted Answer

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

希望有帮助

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

1 回答 1

Related

Reference