动态单选按钮表单反应答案

【问题标题】：Dynamic radio button form react动态单选按钮表单反应
【发布时间】：2017-06-05 03:11:59
【问题描述】：

我正在构建一个从数据库中获取条目的动态表单。行结果将呈现在一个表单中，我有一个组件来呈现表单中的每个条目

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。

【问题讨论】：

标签： javascript mysql node.js forms reactjs

【解决方案1】：

您要做的是使用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 在您开始输入输入时动态变化。

【讨论】：