如何在ReactJS中处理多个选择表单 [英] How handle multiple select form in ReactJS

问题描述

我尝试在ReactJS中处理多种形式选择选项.我试图启发javascript经典代码来处理该问题，但失败了.

I try to handle a multiple form select option, in ReactJS. I have tried to be inspire of javascript classic code to handle that, but I fail.

我的代码只是不发送选择的值给我.怎么处理呢?

My code just don't send me the values selected. How handle that ?

这是我的代码:

  class ChooseYourCharacter extends React.Component {

      constructor(props) {
        super(props);
        this.state = {value: 'coconut'};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({value: event.option});
      }

      handleSubmit(event) {
        alert('Your favorite flavor is: ' + this.state.value);
        event.preventDefault();
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Pick your favorite La Croix flavor:
              <select multiple={true} value={this.state.value} onChange={this.handleChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
              </select>
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }
    ReactDOM.render(
             <ChooseYourCharacter/>,
             document.getElementById('root')
    )

推荐答案

我的基本理解是，当您尝试在reactJS中处理 Select表单元素时，会在HTMLOptionsCollection中生成一个对象.

Of my basic understanding, when you try to handle a Select form element in reactJS you generates an object in HTMLOptionsCollection.

该对象方法和属性的基本根源是 e.target.options .

The fundamental root to this object methods and properties is e.target.options.

您的项目存储在e.target.options.value属性中.

Your items are stored in e.target.options.value property.

要访问options.value对象中存储的值，可以使用[i]循环值，因此可以使用e.target.options [i] .value属性.

To access to a value stored in the options.value object, you can use the [i] loop value, hence e.target.options[i].value property.

e.target.options [i] .value返回字符串数据类型.

The e.target.options[i].value return strings data types.

按照我刚才所说的，我假设对象的存储遵循数字递增约定，如下所示:

Following what I have just said, I assume the objects are stored respecting a number increasing convention as following :

e.target.options [i] .value其中{[i]:值，[i +1]:值(...)} ...

e.target.options[i].value where { [i] : value, [i +1] : value (...)}...

通过使用e.target.options [i] .selected，您可以控制是否在特定位置存储了一个值.

By using e.target.options[i].selected you can control if there is a value stored at a specific location.

e.target.options [i] .selected返回一个布尔值，对处理代码流很有用.

e.target.options[i].selected return you a boolean value, useful to handle the code flow.

现在由您决定.

这是我的代码，以使用javascript代码处理JSX中的多个选择表单:

Here my code to handle multiple select form in JSX with javascript code :

// Create the React Component


    class ChooseYourCharacter extends React.Component {

          // Set the constructor
          constructor(props) {
            super(props);
            this.state = {value: 'coconut'};

            // bind the functions
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
          }

          // extract the value to fluently setState the DOM
          handleChange (e) {
            var options = e.target.options;
            var value = [];
            for (var i = 0, l = options.length; i < l; i++) {
              if (options[i].selected) {
                value.push(options[i].value);
              }
            }
            this.setState({value: value});
          }

          // display in client-side the values choosen
          handleSubmit() {
             alert("you have choose :" + this.state.value);

         }


    (...)

这篇关于如何在ReactJS中处理多个选择表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！