подключить тег выбора к форме, а затем сбросить его при отправке - PullRequest
Новая
       14

подключить тег выбора к форме, а затем сбросить его при отправке

0 голосов
/ 30 сентября 2018

Привет, ребята. Я пытаюсь сбросить тег выбора после отправки с помощью React, я подключил первый параметр к состоянию: 

state = {
    inputs: [],
    tempInput: {

       inputType: 'Please select a type'

    }
  };

, поэтому я в основном выбираю тип в своей форме,он обновляет объект tempInput с помощью inputType, а затем добавляет его в массив объектов, 

 <div className="formG">
            <form className="form-maker" onSubmit={this.handleSubmit}>
               <select onChange={this.onSelect}>
                <option>{this.state.tempInput.inputType}</option>
                <option value="text">text</option>
                <option value="color">color</option>
                <option value="date">date</option>
                <option value="email">email</option>
                <option value="tel">tel</option>
                <option value="number">number</option>
              </select>

              <button>Submit</button>
            </form>

Это мой метод выбора: 

onSelect = ({ target }) => {
    const { tempInput } = this.state;
    tempInput.inputType = target.value;
    this.setState({ tempInput });

  };


handleSubmit = e => {
    e.preventDefault();
how to do that in handleSubmit? to put the tempInput.inputType to ="Please pick a type"
  };

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

в вашей функции onSelect, вы изменяете объект состояния (tempInput.inputType = target.value;), это не очень хорошая практика в реакции.

, если вы хотите, чтобы ваше выбранное значение контролировалось состоянием реакции, сначала вынужно связать его значение с состоянием реакции, которое называется контролируемым компонентом, например: 

<select onChange={this.onSelect} value={this.state.tempInput.inputType}>
0 голосов
/ 30 сентября 2018

Это неуправляемый элемент .Если вы хотите контролировать значение input / select, вам нужно установить его через ваше состояние: 

const values = [
  "text", "color", "date", "email", "tel","number"
]

class App extends React.Component {
  state = { value: "" };

  onSelect = ({target}) => this.setState({value: target.value})

  handleSubmit = () => {
    console.log('submit with ',this.state.value)
    this.setState({value: ''})
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          <option>Select A value</option>
          {values.map(val => <option key={val} value={val} selected={val === value}>{val}</option>)}
        </select>
        <button onClick={this.handleSubmit}>Submit</button>
        <div>{`Selectet Value is ${value}`}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Вот пример без массива: 

class App extends React.Component {
  state = { value: "" };

  onSelect = ({ target }) => this.setState({ value: target.value })

  handleSubmit = () => {
    console.log('submit with ', this.state.value)
    this.setState({ value: '' })
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          <option selected={value === ""} value="">Select A value</option>
          <option selected={value === "text"} value="text">text</option>
          <option selected={value === "color"} value="color">color</option>
          <option selected={value === "date"} value="date">date</option>
          <option selected={value === "email"} value="email">email</option>
          <option selected={value === "tel"} value="tel">tel</option>
          <option selected={value === "number"} value="number">number</option>
        </select>
        <button onClick={this.handleSubmit}>Submit</button>
        <div>{`Selectet Value is ${value}`}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

Конечно, здесь много повторяющегося кода, в программировании есть принцип "СУХОЙ" (не повторяй себя).
Этопочему мы используем такие циклы, как Array.prototype.map

...