動態單選按鈕窗體反應

我正在構建一個動態窗體，從數據庫中獲取條目。該行結果將在一個形式呈現，我有一個組件呈現形式動態單選按鈕窗體反應

的form-row的組件中的每個條目：

class Juego extends React.Component { 
    render() { 
     return(
      <tr> 
       <td>{shortDate(this.props.juego.fecha)}</td> 
       <td> 
        <input type="radio" name={`apuesta[${this.props.juego.id}]`} value="G" id={this.props.juego.id} onChange={this.props.handleChange} /> 
        <label>{this.props.juego.local}</label> 
        <span className="pull-right">{this.props.juego.spread_eq_local}</span> 
       </td> 

       <td> 
        <input type="radio" name={`apuesta[${this.props.juego.id}]`} value="E" id={this.props.juego.id} onChange={this.props.handleChange} /> 
        <label>Empate</label> 
        <span className="pull-right">{this.props.juego.spread_empate}</span> 
       </td> 

       <td> 
        <input type="radio" name={`apuesta[${this.props.juego.id}]`} value="P" id={this.props.juego.id} onChange={this.props.handleChange} /> 
        <label>{this.props.juego.visitante}</label> 
        <span className="pull-right">{this.props.juego.spread_eq_visitante}</span> 
       </td> 
       <td> 
        <input type="number" name={`puntos[${this.props.juego.id}]`} id={this.props.juego.id} onChange={this.props.handleChange} /> 
       </td> 
      </tr> 
     ) 
    } 
}

該行映射是這樣的：

juegosList=()=>{ 
    return (
     <div className="lista-juegos"> 

      <table className="table table-striped"> 
       <tbody> 
        {this.props.juegos.map(jueg=><Juego juego={jueg} key={jueg.id} handleChange={this.handleAddBet} addToState={this.addState}/>)} 
       </tbody> 
      </table> 
     </div> 
    ) 
}

最後呈現在主要組件上：

render() { 
    return (
     <div className="juegos-form"> 
      <form onSubmit={this.handleSubmit}> 
       {this.props.juegos.length===0?this.empty:this.juegosList()} 
       <button className="btn btn-lg btn-success pull-right">Apostar</button> 
      </form> 
     </div> 

    ) 
}

我試圖通過使Juego分量的值到主組件的狀態作爲數組實現這一點：

apuestas:[ 
      {id, 
      apuesta, 
      puntos}, 
      {id, 
      apuesta, 
      puntos} 
     ]

這樣的事情，但我有傳遞這些值到主組件的狀態的麻煩。

任何人都可以想到如何使這項工作或更好的方法？我使用 NodeJS，React，Redux，Express和MySQL。

來源

2017-06-05 Héctor Monárrez

您正在嘗試的是使用由child組件處理的事件將組件的狀態從parent更改爲。

你parent應該是這樣的：

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

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

    render() { 
    return (
     <div> 
     <MainInput 
      onChange={this.handleChange.bind(this)} 
      /> 
     </div> 
    ) 
    } 
}

而且你child組件：

class MainInput extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <input 
     onChange={this.props.onChange}/> 
    ) 
    } 
}

這裏有一個演示：https://codesandbox.io/s/pQJvX03X2

你可以看到state是動態變化的，當你開始輸入在輸入。

來源

2017-06-05 04:54:52

動態單選按鈕窗體反應

回答

相關問題