Question

我正在尝试将每个无线电拨号盘的值插入db 100米，500米，1000米中。单击提交按钮时，它将处理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)

Answer 1

因此，我能够找到解决问题的方法。

第一件事是我将state的难度更改为类似这样的数组：

difficulty: ['100 meters', '500 meters', '1000 meters']

然后，我在每个value上更改了input，以访问数组的正确索引，如下所示：

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

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

value={this.state.difficulty[2]}

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

1 个答案: