非受控组件

司徒正美 edited this page Jun 2, 2017 · 1 revision

表单元素如果指定了value/checked属性,但没有指定其他控制value/checked改变的其他属性(如onClick, onInput, onChange, disabled, readOnly),那么它将成为非受控组件。用户无法通过输入,点击或选择来改变此元素的value/checked或下拉框的option的selected值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

<script type='text/javascript' src="./dist/React.js"></script>
    <script src="./test/babel.js"></script>
    <script type='text/babel'>
var textarea, radio, text, select, checkbox

window.onload = function(){


class Text extends React.Component{
 constructor(props) {
    super(props);
    this.state={value:'Hello'};
    this.handleChange=this.handleChange.bind(this);
  }
  handleChange(event) {
     this.setState({value: event.target.value});
  }
  render() {
     var value = this.state.value;
    return <input type="text" value={this.state.value}  />;
  }
}
class Checkbox extends React.Component{
 constructor(props) {
    super(props);
    this.state={checked: false};
    this.handleChange=this.handleChange.bind(this);
  }
  handleChange(event) {
     this.setState({checked: event.target.checked});
  }
  render() {
     var value = this.state.value;
     return <input type="checkbox" name='xxx' checked={this.state.checked}  />;
  }
}
class Radio extends React.Component{
    constructor(props) {
        super(props);
        this.state={checked: false};
        this.handleChange=this.handleChange.bind(this);
  }
  handleChange(event) {
        this.setState({checked: event.target.checked});
  }
  render() {
        var value = this.state.value;
        return <input type="radio" name='xxx' checked={this.state.checked}  />
  }
}
class TextArea extends React.Component{
    constructor(props) {
        super(props);
        this.state={value: 'dddd'};
        this.handleChange=this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({value: event.target.checked});
    }
    render() {
        return <textarea value={this.state.value}></textarea>
    }
}
class Select extends React.Component {
    constructor() {
        super()
        this.state = {
            value: 'bbb'
        }
    }
    render() {
        return <select id='node8' value={this.state.value}>
            <option value='aaa'>aaa</option>
            <option value='bbb'>bbb</option>
            <option value='ccc'>ccc</option>
        </select>
    }
}
    text = ReactDOM.render(
        <Text />,
    document.getElementById('text')
    )
    checkbox = ReactDOM.render(
        <Checkbox />,
    document.getElementById('checkbox')
    )
    radio = ReactDOM.render(
        <Radio />,
    document.getElementById('radio')
    )
    textarea = ReactDOM.render(
        <TextArea />,
    document.getElementById('textarea')
    )
    select = ReactDOM.render(
        <Select />,
    document.getElementById('select')
    )
}
    </script>
</head>

<body>

    <div>各种非受控组件</div>
    <div id='text'></div>
    <div id='checkbox'></div>
    <div id='radio'></div>
    <div id='textarea'></div>
   <div id='select'></div>

</body>

</html>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.