动态单选按钮窗体反应

我正在构建一个动态窗体，从数据库中获取条目。该行结果将在一个形式呈现，我有一个组件呈现形式动态单选按钮窗体反应

的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

动态单选按钮窗体反应

回答

相关问题