入力値を取得して、親に返す

Question

私は以下の2つのコンポーネントを持っていますアプリケーションとその子ツールバーです。

ツールバーにはフォームと入力が含まれていますが、入力からAppコンポーネントの状態に値を渡したいと思いますが、使用が確認されたとき（送信時や入力時など）にのみ行います。

プロキシとイベントオブジェクトを取得するだけで現在の試行は機能しません（これは意味があります）。どうすればいい？

私はReduxなどを使用していません。

App.js

import React, {Component} from 'react' 
import {render} from 'react-dom' 
import {} from './styles/base.scss' 

import ImageContainer from './components/Images' 
import Toolbar from './components/Toolbar' 

export default class App extends Component { 
    constructor(props) { 
     super(props); 
     // http://www.cloudypoint.com/Tutorials/discussion/javascript-how-to-update-parents-state-in-react/ 
     this.setFolderPathHandler = this.setFolderPathHandler.bind(this); 
    } 

    setFolderPathHandler(e) { 
     e.preventDefault(); 
     console.log(arguments); 
     // this.setState({ 
     //  xyz: input 
     // }); 
    } 

    render() { 
     return (
      <div> 
       <Toolbar setFolderPathHandler={this.setFolderPathHandler} /> 
       <ImageContainer /> 
      </div> 
     ) 
    } 
} 

ツールバー/ index.js

import React, { Component } from 'react'; 
import path from 'path'; 

class Toolbar extends Component { 
    render() { 
     return (
      <nav className="toolbar"> 
       <div className="column"> 
        {/* START used to be it's own component */} 
        <form onSubmit={this.props.setFolderPathHandler}> 
         <div className="form-field"> 
          <input type="text" className="folder-path" ref={(input) => this.input = input} /> 
          <button><i className="fa fa-fw fa-2x fa-folder-open" aria-hidden="true"></i></button> 
         </div> 
        </form> 
        {/* END used to be it's own component */} 
       </div> 
       <div className="column"> 
        <button><i className="fa fa-fw fa-2x fa-chevron-left" aria-hidden="true"></i></button> 
        <button><i className="fa fa-fw fa-2x fa-chevron-right" aria-hidden="true"></i></button> 
       </div> 
      </nav> 
     ); 
    } 
} 

export default Toolbar; 

私は別の成分として入力を持っていたが、それは私にはあまりにも混乱した（私は新しいです反応する）。

Answer 1

App.js

import React, {Component} from 'react' 
import {render} from 'react-dom' 
import {} from './styles/base.scss' 

import ImageContainer from './components/Images' 
import Toolbar from './components/Toolbar' 

export default class App extends Component { 
    constructor(props) { 
     super(props); 
     // http://www.cloudypoint.com/Tutorials/discussion/javascript-how-to-update-parents-state-in-react/ 
     this.setFolderPathHandler = this.setFolderPathHandler.bind(this); 
    } 

    setFolderPathHandler(inputValue) { 
     // this.setState({ 
     //  xyz: inputValue 
     // }); 
    } 

    render() { 
     return (
      <div> 
       <Toolbar setFolderPathHandler={this.setFolderPathHandler} /> 
       <ImageContainer /> 
      </div> 
     ) 
    } 
} 

ツールバー/ index.js

import React, { Component } from 'react'; 
import path from 'path'; 

class Toolbar extends Component { 

    constructor(props) { 
     super(props); 
     this.submit = this.submit.bind(this); 
    } 

    submit(event) { 
     event.preventDefault(); 
     this.props.setFolderPathHandler(this.input.value); 
    } 

    render() { 
     return (
      <nav className="toolbar"> 
       <div className="column"> 
        {/* START used to be it's own component */} 
        <form onSubmit={this.submit.bind(this)}> 
         <div className="form-field"> 
          <input type="text" className="folder-path" ref={(input) => this.input = input} /> 
          <button><i className="fa fa-fw fa-2x fa-folder-open" aria-hidden="true"></i></button> 
         </div> 
        </form> 
        {/* END used to be it's own component */} 
       </div> 
       <div className="column"> 
        <button><i className="fa fa-fw fa-2x fa-chevron-left" aria-hidden="true"></i></button> 
        <button><i className="fa fa-fw fa-2x fa-chevron-right" aria-hidden="true"></i></button> 
       </div> 
      </nav> 
     ); 
    } 
} 

export default Toolbar; 

Answer 2

まず、あなたがツールバーに入力値を追跡する場合、あなたはstateにそれを保存する必要があります。

class Toolbar extends Component { 
    constructor(...args) { 
     super(...args) 

     this.state = {text: ''}; 
    } 

    onTextChange(event) { 
     const text = event.target.value; 
     this.setState({text}); 
    } 

    onSubmit(event) { 
     event.preventDefault(); 

     this.props.setFolderPathHandler(this.state.text); 
    }   

    render() { 
     return (
      <nav className="toolbar"> 
       <div className="column"> 
        <form onSubmit={this.onSubmit.bind(this)}> 
         <div className="form-field"> 
          <input type="text" className="folder-path" value={this.state.text} onChange={this.onTextChange.bind(this)} /> 
          <button><i className="fa fa-fw fa-2x fa-folder-open" aria-hidden="true"></i></button> 
         </div> 
        </form> 
       </div> 
       ... 
      </nav> 
     ); 
    } 
} 

export default Toolbar; 

内部ではinputの値を保持しており、ネイティブイベントを親コントローラに渡していないことに注意してください。そして、親コントローラで

：

setFolderPathHandler(input) { 
    // do something with the input 
} 

このソリューションでは、コンポーネントがDOMから削除し、再び追加されない限り、あなたは親コンポーネントからの入力値をリセットすることができないという問題点があります。

これは、通常、stateを親コンポーネントに配置することで解決されます。次に、親はを含む子にtextとonChangeのハンドラを渡すか、<input>を作成して子コンポーネントにプロパティとして渡すことができます。考えてみましょう：

class Toolbar extends Component { 
    render() { 
     return (
      <nav className="toolbar"> 
       <div className="column"> 
        <form onSubmit={this.props.onSubmit}> 
         <div className="form-field"> 
          {this.props.textInput} 
          <button><i className="fa fa-fw fa-2x fa-folder-open" aria-hidden="true"></i></button> 
         </div> 
        </form> 
       </div> 
       ... 
      </nav> 
     ); 
    } 
} 

とApp：

export default class App extends Component { 
    ... 

    render() { 
     const textInput = (
      <input ... value={this.state.text} onChange={this.onTextChange} /> 
     ); 

     return (
      <div> 
       <Toolbar onSubmit={this.onSubmit} textInput={textInput} /> 
       <ImageContainer /> 
      </div> 
     ) 
    } 
} 

これは、ビジネスロジックを処理するコンポーネント（状態、スマートコンポーネントを持っている）だけ存在のもの（ステートレス、ダムのコンポーネント）成分を分離することができます。