ReactJS教程代码示例：表单（form） - 下拉列表选择框

React.js Form and select，可以选择多个值（多选），通过设置multiple为true

react, tutorial, form

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2235
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

handleChange(event) {
    this.setState({value: event.target.value});
  }

handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById('root')
);

编译

CSS

HTML

React.js Form and select，可以选择多个值（多选），通过设置multiple为true

react, tutorial, form

编辑器支持Emmet

快捷键

React.js Form and select，可以选择多个值（多选），通过设置multiple为true

react, tutorial, form

babylon.js + react.js很棒的3d图表代码示例

GentleForm演示： 一款可访问用户友好的表单验证JS库

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

GentleForm演示：一款可访问用户友好的表单验证JS库