Question

我正在构建一个从db中获取条目的动态表单。行结果将以表单形式呈现，并且我有一个组件来呈现表单中的每个条目

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

您要做的是使用parent组件处理的事件更改child组件的状态。

您的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动态更改。

动态单选按钮形式反应

1 个答案: