动态单选按钮窗体反应
问题描述:
我正在构建一个动态窗体,从数据库中获取条目。该行结果将在一个形式呈现,我有一个组件呈现形式动态单选按钮窗体反应
的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。
答
您正在尝试的是使用由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
是动态变化的,当你开始输入在输入。