react09_表单

react 表单

1.input输入框

react中用state来设置输入框的值，获取的时候直接获取this.state.inputValue即可

class InputForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {inputValue: ''};

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

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

    handleSubmit(e){
        alert('名字： ' + this.state.inputValue);
        e.preventDefault();
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="">
                        名字：
                        <input type="text" value={this.state.inputValue} onChange={this.handleChange}/>
                    </label><br/>
                    <input type="submit" value="提交"/>
                </form>
                <h3>{this.state.inputValue}</h3>
            </div>
        );
    }
}

ReactDOM.render(
    <InputForm />,
    document.getElementById('react_test')
);

2.textarea文本框

textarea的使用和input[text]类似，都是使用this.state.textareaValue

class TextareaForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {textareaValue: ''};

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

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

    handleSubmit(e){
        alert('名字： ' + this.state.textareaValue);
        e.preventDefault();
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="">
                        名字：
                        <textarea type="text" value={this.state.textareaValue} onChange={this.handleChange}/>
                    </label><br/>
                    <input type="submit" value="提交"/>
                </form>
                <h3>{this.state.textareaValue}</h3>
            </div>
        );
    }
}

ReactDOM.render(
    <TextareaForm />,
    document.getElementById('react_test')
);

3.select下拉选择框

在react中使用state来代替selected，直接在<select>标签上使用value={this.state.selectValue}

class SelectForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {selectValue: 'higher'};

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

    handleSubmit(e){
        e.preventDefault();
        alert(this.state.selectValue);
    }

    handleChange(e){
        this.setState({value: e.target.selectValue});
    }
    
    render() {
      return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <select value={this.state.selectValue} onChange={this.handleChange}>
                <option value="lower">低配</option>
                <option value="medium">中配</option>
                <option value="higher">高配</option>
            </select>
            <input type="submit" value="提交" />
          </form>
          <h3>当前选择：{this.state.selectValue}</h3>
        </div>
      )
    };
}

ReactDOM.render(
    <SelectForm />,
    document.getElementById('react_test')
);

4.radio单选按钮

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

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

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

    handleSubmit(e) {
        e.preventDefault();
        alert('性别：' + (this.state.value==='male' ? '男' : '女'));
    }
    
    render () {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="">
                        性别：
                        <input type="radio" name="sex" onChange={this.handleChange} value='male'/>男&nbsp;
                        <input type="radio" name="sex" onChange={this.handleChange} value='famale'/>女
                    </label><br/>
                    <input type="submit" value="提交"/>
                </form>
            </div>
        );
    }
}

ReactDOM.render(
    <RadioForm />,
    document.getElementById('react_test')
);

5.input文件上传

input[file]在react中是不受控组件，它的state属性只读，所以无法像其他表单项那样使用

class FileForm extends React.Component{
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.fileInput = React.createRef();
    }

    handleSubmit(e){
        e.preventDefault();
        alert(`选择的文件：${this.fileInput.current.files[0].name}`);
    }

    render() {
      return (
        <div>
          <form onSubmit={this.handleSubmit}>
              <label htmlFor="">
                  文件：
                  <input type="file" ref={this.fileInput} />
              </label><br/>
              <input type="submit" value="提交"/>
          </form>
        </div>
      )
    };
}

ReactDOM.render(
    <FileForm />,
    document.getElementById('react_test')
);

6.表单多项输入处理

class MultiForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            isGoing: false,
            guestNum: 2
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    
    handleInputChange(e){
        //获取发生改变的html元素
        const target = e.target;
        
        //target.checkd是一个布尔值，表示checkbox是否被勾选
        //若是checkbox,则value为布尔值，若是input输入框，则value为输入的值
        const value = target.type==='checkbox' ? target.checked : target.value;
        const name = target.name;

        //[name]会自动匹配state中的key，然后将value赋值给key相应的value
        this.setState({ [name]: value });
    }

    handleSubmit(e) {
        e.preventDefault();
    }

    render () {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="">
                        参与：
                        <input type="checkbox" name="isGoing" 
                        checked={this.state.checked} onChange={this.handleInputChange}/>
                    </label><br/>
                    <label htmlFor="">
                        来宾：
                        <input type="number" name="guestNum" 
                        value={this.state.guestNum} onChange={this.handleInputChange}/>
                    </label><br/>
                    <input type="submit" value="提交" />
                </form>
            </div>
        )
    }
} 

ReactDOM.render(
    <MultiForm />,
    document.getElementById('react_test')
);