javascript - 动态单选按钮表单 react

Question

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

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。

Answer 1

您想要做的是使用子组件处理的事件来更改父组件的状态。

您的父级应如下所示:

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>
    )
  }
}

以及您的子组件:

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

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

这是一个演示:https://codesandbox.io/s/pQJvX03X2

您可以看到，当您开始在输入上键入时，状态会动态变化。