React Formのドキュメントを読んで見る

React Formのドキュメントを読んで見る

ja.reactjs.org

元のソース

class Test extends React.Component {
  constructor(props) {
    super(props)
  }
  render () {
    console.log(this)
    return (
      <div className="App" >
        
      </div>
    );
  }
}

export default Test;

thisをみて見る

thisの中身にはprops、context、refsなどを元々持っているみたい

フォームを送信する

フォームの仕組み

• stateでvalueをもつ
• onChangeでvalueをつど更新する
• Oncubmitでvalueの値を出力する

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

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

  handleSubmit(e){
    alert("a name was submited" + this.state.value)
    e.preventDefault()
  }

  render () {
    return (
      <div className="App" >
        <form onSubmit={(e)=> this.handleSubmit(e)}>
          <label>
            Name:
            <input type="text" name="name" onChange={(e) => this.handleChange(e)}/>
          </label>
          <br/>
          <input type="submit" name="name"/>
        </form>
        
      </div>
    );
  }
}

export default Test;

• textarea

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

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

  handleSubmit(e){
    alert("a name was submited" + this.state.value)
    e.preventDefault()
  }

  render () {
    return (
      <div className="App" >
        <form onSubmit={(e)=> this.handleSubmit(e)}>
          <label>
            Name:

            <textarea onChange={(e) => this.handleChange(e)}></textarea>
          </label>
          <br/>
          <input type="submit" name="name"/>
        </form>  
      </div>
    );
  }
}

export default Test;

• select

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

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

  handleSubmit(e){
    alert("a name was submited" + this.state.value)
    e.preventDefault()
  }

  render () {
    console.log(this.state.value)
    return (
      <div className="App" >
        <form onSubmit={(e)=> this.handleSubmit(e)}>
          <label>
            Name:
            <select value={this.state.value} onChange={(e) => this.handleChange(e)}>
              <option value="grape">grape</option>
              <option value="banana">banana</option>
              <option value="orange">orange</option>
            </select>
          </label>
          <br/>
          <input type="submit" name="name"/>
        </form>  
      </div>
    );
  }
}

export default Test;

• 複数フォームの扱い

stateにフィールド分のstateの値を作る

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: '',fruites: ''}
  }

  handleChange(e){
    const name = e.target.name
    this.setState({[name]: e.target.value})
  }

  handleSubmit(e){
    alert("a name was submited" + this.state.value)
    e.preventDefault()
  }

  render () {
    console.log(this.state.name)
    console.log(this.state.fruites)
    return (
      <div className="App" >
        <form onSubmit={(e)=> this.handleSubmit(e)}>
          <label>
            <input name="name" onChange={(e)=> this.handleChange(e)}/>
          </label>
          <label>
            Name:
            <select name="fruites" onChange={(e) => this.handleChange(e)}>
              <option value="grape">grape</option>
              <option value="banana">banana</option>
              <option value="orange">orange</option>
            </select>
          </label>
          <br/>
          <input type="submit" name="name"/>
        </form>  
      </div>
    );
  }
}

export default Test;

ポイント

this.setState({
  [name]: value
});

# これは上と同じらしい
var partialState = {};
partialState[name] = value;
this.setState(partialState);

画像表示

ポイントは、URL.createObjectURLでurlを作成する

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {image: '',fruites: ''}
  }

  handleChange(e){
    const name = e.target.name
    let val = e.target.value
    if (name == "image"){
      val = URL.createObjectURL( e.target.files[0])
    }
    this.setState({[name]: val})
  }

  handleSubmit(e){
    alert("a name was submited" + this.state.value)
    e.preventDefault()
  }

  render () {
    return (
      <div className="App" >
        <form onSubmit={(e)=> this.handleSubmit(e)}>
          <label>
            <input type="file" name="image"  onChange={(e)=> this.handleChange(e)}/>
          </label>
          <img src={this.state.image}  alt="アイコン" />
          <label>
            Name:
            <select name="fruites" onChange={(e) => this.handleChange(e)}>
              <option value="grape">grape</option>
              <option value="banana">banana</option>
              <option value="orange">orange</option>
            </select>
          </label>
          <br/>
          <input type="submit" name="name"/>
        </form>  
      </div>
    );
  }
}

export default Test;