Reactで入力値の状態を管理する方法

Question

効果的にカルーセルであるReactコンポーネントを構築しています。

時々、このカルーセル（スライドと呼んでいます）にはフォームデータがあり、最後に検証と収集が必要になります。

私はPage.slideData関数でフォームの質問とそれに付随する入力を渡します。フォームの小さなスキーマを渡して、それぞれのスライドをどのように検証するかをSlidesに伝えます。

私の問題は、各入力の値への参照を取得しています。 Slides.collectData funcでは "testing"文字列に対してテストを行います。しかし、私は "テスト"文字列の代わりに現在の入力の値を取得する方法を把握することはできません。私はまた、最後にすべてのフォームデータを必要とし、それが終わったらそれを親に戻します。

ご協力いただければ幸いです。

class Page extends Component { 
    constructor(props) { 
    super(props); 
    this.slideData = this.slideData.bind(this); 
    this.formSchema = this.formSchema.bind(this); 
    } 
    slideData() { 
    return [ 
     label: `When is this thing?`, 
     input: <input type="text" />, 
     }, { 
     label: 'Will this be private?', 
     input: <input type="checkbox" />, 
     }, 
    ]; 
    } 
    formSchema() { 
    return [ 
     { key: 'date', validate: String }, 
     { key: 'isPrivate', validate: Boolean }, 
    ]; 
    } 
    render() { 
    return (
     <main className="Page"> 
     <Slides 
      data={this.slideData()} 
      formSchema={this.formSchema()} 
     /> 
     </main> 
    ); 
    } 
} 


class Slides extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     position: 1, 
     qty: this.props.data.length, 
     error: null, 
    } 
    this.cycle = this.cycle.bind(this); 
    } 
    moveSlides(newPosition) { 
    const { qty } = this.state; 
    if (newPosition < 1 || newPosition > qty) { 
     return; 
    } 
    this.setState({ 
     position: newPosition, 
     error: null, 
    }); 
    } 
    cycle(num) { 
    const { position } = this.state; 
    const newPosition = position + num; 
    if (this.props.formSchema) { 
     this.collectData(position, newPosition); 
    } else { 
     this.moveSlides(newPosition); 
    } 
    } 
    collectData(position, newPosition) { 
    const { formSchema } = this.props; 
    const currentSlideSchema = formSchema[position - 1]; 

    const { collectedData } = this.state; 
    let newCollectedData = Object.assign({}, collectedData); 
    newCollectedData[currentSlideSchema.key] = 'testing'; 

    if (
     Match.test(
     newCollectedData[currentSlideSchema.key], 
     currentSlideSchema.validate 
    ) || position > newPosition) { 
     this.setState({ collectedData: newCollectedData }); 
     this.moveSlides(newPosition); 
    } else { 
     this.setState({ error: "Invalid entry" }); 
    } 
    } 
    renderSlides() { 
    const { position } = this.state; 
    const { data } = this.props; 

    return data.map((slide, idx) => { 
     const index = idx + 1; 
     let alignment; 
     if (index === position) { 
     alignment = 'active'; 
     } else if (index > position) { 
     alignment = 'right'; 
     } else { 
     alignment = 'left'; 
     } 
     return (
     <Slide 
      label={slide.label} 
      input={slide.input} 
      key={`Slide_${idx}`} 
      alignment={alignment} 
     /> 
    ); 
    }); 
    } 
    render() { 
    const { position, error } = this.state; 

    return (
     <div className="Slides"> 
     <div className="Slides_ContentWrapper"> 
      {this.renderSlides()} 
     </div> 
     { error && 
      <span className="Slides_Error">{error}</span> 
     } 
     <div className="Slides_Buttons"> 
      <button>onClick={() => this.cycle(-1)}>Go back</button> 
      <button>onClick={() => this.cycle(1)}>Go Forward</button> 
     </div> 
     </div> 
    ); 
    } 
} 

class Slide extends Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    const { label, input, alignment } = this.props; 
    return (
     <div className={`Slide Slide--${alignment}`}> 
     <span className="Slide_Label">{ label }</span> 
     { input } 
     </div> 
    ); 
    } 
} 

Answer 1

、あなたのページからダウン要素を反応させるだけではなくSlideが入力をレンダリングしているとの関連する小道具を渡す渡さないでください、例えばtype。

次に、ユーザー入力を最初のパラメーターとして渡す入力に対して、onChangeイベント・ハンドラーを使用します。

この値を親に戻すには（ページまたはスライド、どちらを選択してもかまいませんが、同じ原理です）、コールバック関数を親からコールバック関数に渡します。例えば

<Slide 
     label={slide.label} 
     input={slide.input} 
     key={`Slide_${idx}`} 
     alignment={alignment} 
     onChange={this.onChange} 
    />