Javascript 将无线电拨号输入信息插入数据库组件

我试图将每个无线电拨号盘的值插入到100米、500米、1000米的分贝中。单击submit按钮时，它将处理

handleAddProblem

功能。它可以添加除“困难”之外的所有内容。我是否需要将每个无线电拨号设置为不同的状态以实现我想要的

class Submission extends Component {
    constructor(props) {
        super(props)

        this.state = {
            testUrl: '',
            fileToTest: '',
            difficulty: '',
            name: '',
            instructions: '',
        }
    }

    updateTestFile = (url) => {
        var newUrl= url.substring(0, url.indexOf('?'))
        this.setState({testUrl: newUrl})
    }

    handleAddProblem = () => {
        this.props.addProblem(this.state.name, this.state.instructions, this.state.testUrl, this.state.difficulty).then( () => {
            this.setState({name: '', instructions: '', difficulty: ''})
        })
    }


    render(){
        return(
            <div className="background">
                <div>
                  <Header />
                </div>
                <div className="contentContainer">
                  <div>
                    <Nav />
                  </div>
                  <div className="submission">
                    <div>
                      <h1>Submit new problems</h1>
                      <h3>Thanks for helping our site grow</h3>
                      <p> You will need to insert the name, difficulty and instructions for the problem you want to submit. Before clicking on the submit problem button make sure to upload your unit test file first by clicking in the box that says "Click to upload file!". </p>
                      <h4> Be sure to view the unit test example page to see how to write your test file. </h4>
                    </div>

                        <div>
                          <Link to={'/unitTestExample'}><button className="unitTestExampleBtn">Unit test example!!!</button></Link>
                        </div> 

                    <div>
                      <form>
                        <p> Problem name:</p>
                        <input value={this.state.name} onChange={ (e) => this.setState({ name: e.target.value })}></input>
                        <p> Difficulty: </p>
                        <input type='radio' value={this.state.difficulty} onChange={ (e) => this.setState({ difficulty: e.target.value })}></input>100 Meters<br />
                        <input type='radio' value={this.state.difficulty} onChange={ (e) => this.setState({ difficulty: e.target.value })}></input>500 Meters<br />
                        <input type='radio' value={this.state.difficulty} onChange={ (e) => this.setState({ difficulty: e.target.value })}></input>1000 Meters<br />
                        <p> Problem Instrctions: </p>
                        <textarea name="description" value={this.state.instructions} onChange={ (e) => this.setState({ instructions: e.target.value })}></textarea>
                        <div>
                           <button className="submitButton" onClick={this.handleAddProblem}>Submit Problem</button>
                        </div>
                      </form>
                    <br />

                    </div>

                    <div className="sub-contain">
                      {this.state.testFile ?
                          <div className= 'file-preview dropstyle'>
                              {this.state.testFile}
                          </div> :
                          <AddFile updateTestfile= {this.updateTestFile}/>
                      }
                    </div> 
            </div>
            <div>
              <Stats />
            </div>
          </div>
          </div>
        )
    }
}

function mapStateToProps (state) {
    return state;
}

export default connect(mapStateToProps, { addProblem }) (Submission)

类提交扩展组件{
建造师（道具）{
超级（道具）
此.state={
testUrl:“”，
fileToTest:“”，
困难：''，
名称：“”，
说明：“”，
}
}
updateTestFile=（url）=>{
var newUrl=url.substring（0，url.indexOf（'？'））
this.setState（{testUrl:newUrl}）
}
handleAddProblem=（）=>{
this.props.addProblem（this.state.name，this.state.instructions，this.state.testUrl，this.state.demobility）。然后（（）=>{
this.setState（{name:''，说明：''，难度：'}）
})
}
render（）{
返回(
提交新问题
感谢您帮助我们的网站成长
您需要为要提交的问题插入名称、难度和说明。单击“提交问题”按钮之前，请确保先通过单击“单击以上载文件！”框上载单元测试文件

请务必查看单元测试示例页面，了解如何编写测试文件。
单元测试示例！！！
问题名称：

this.setState（{name:e.target.value}）}>
困难：

this.setState（{难度：e.target.value}）}>100米

this.setState（{难度：e.target.value}}>500米

this.setState（{难度：e.target.value}}>1000米

问题说明：

this.setState（{指令：e.target.value}）}>
提交问题


{this.state.testFile？
{this.state.testFile}
:
}
)
}
}
函数MapStateTops（状态）{
返回状态；
}
导出默认连接（mapStateToProps，{addProblem}）（提交）

所以我找到了解决问题的方法

首先，我将

状态的难度更改为如下数组：

难度：[“100米”、“500米”、“1000米”]

然后我更改了每个
输入的
值
，以访问数组的正确索引，如下所示：

value={this.state.demobility[0]}

value={this.state.demobility[1]}

value={this.state.demobility[2]}
看看这篇文章，它展示了如何在react中处理单选按钮：