如何在反应中将两个输入名称导入数组

Question

class BankForm extends Component {
   constructor() {
     super();
     this.onSubmit = this.onSubmit.bind(this);
   }

   onSubmit(e) {
     e.preventDefault();
     console.log(e.target.price.value);
   }

   render() {
      return (
        <AddForm onSubmit={this.onSubmit} />
      );
   }
}

function AddForm(props) {
   return (
      <div>
        <form onSubmit={props.onSubmit}>
           <input type="number" name="price" />
           <input type="number" name="price" />
           <button type="submit">Submit</button>
        </form>
      </div>
    );
}

如何在反应中将两个输入名称导入数组

请在 console.log(e.target.price.value);

中修复我的代码

我试过了:

console.log(e.target.price.value[0]); x

console.log(e.target.price[0].value); x

如果只有一个价格，此代码将运行良好。

救救我！！！ :C

Answer 1

根据 react docs，您应该为输入值设置一个支持状态字段。在反应中，这称为受控输入。在更改每个输入时，您将该输入值存储到状态中。由于您需要一个价格数组，因此您需要将一些状态变量设置为一个数组，然后在输入的每次更改时，将新值存储在该状态数组中。在渲染时，您需要再次设置输入值，以便它可见。

class BankForm extends React.Component {
   constructor() {
     super();
     this.onSubmit = this.onSubmit.bind(this);
     this.state = {
       price: [
         21,
         55
       ]
     };
   }

   onSubmit(e) {
     e.preventDefault();
     console.log(this.state.price);
   }

   onPriceChange(index, e) {

     var prices = this.state.price.slice();

     prices[index] = e.target.value;

     this.setState({
       price: prices
     });
   }

   render() {
      return (
        <div>
        <form onSubmit={this.onSubmit}>
           <input type="number"  value={this.state.price[0]} onChange={this.onPriceChange.bind(this, 0)} />
           <input type="number"  value={this.state.price[1]} onChange={this.onPriceChange.bind(this, 1)} />
           <button type="submit">Submit</button>
        </form>
      </div>
      );
   }
}

在此示例中，我通过预先设置数组值来默认文本框值，但您可以使用像这样的空数组来更改它

this.state = {
           price: []
         };

每个输入都将其 onChange 事件连接到 onPriceChange 函数。该函数只是通过复制价格数组来更新状态，然后使用传入的索引设置一个新值。

onPriceChange(index, e) {

         var prices = this.state.price.slice();

         prices[index] = e.target.value;

         this.setState({
           price: prices
         });
       }

最后 onsubmit 只是将当前状态打印到控制台

onSubmit(e) {
         e.preventDefault();
         console.log(this.state.price);
       }

我有一个工作 example on webpackbin here you can play with. I know, this seems like a lot of work if you have large forms but there is a library I like that makes this really simple called formsy。

Formsy 通过使用 mixins 包装所有这些工作，并允许您构建可重用的表单组件，如文本框、组合等。将它们放在 formsy 表单组件中，神奇地在 onsubmit 事件中，您有一个很好的模型可以工作这样您的代码就可以看起来像这样。

import Formsy from 'formsy-react';

  const MyAppForm = React.createClass({
    getInitialState() {
      return {
        canSubmit: false
      }
    },
    enableButton() {
      this.setState({
        canSubmit: true
      });
    },
    disableButton() {
      this.setState({
        canSubmit: false
      });
    },
    submit(model) {
      someDep.saveEmail(model.email);
    },
    render() {
      return (
        <Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
          <MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
          <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
        </Formsy.Form>
      );
    }
  });

在您表单的提交处理程序中，formsy 将为您提供一个根据您的输入值生成的模型。在幕后，formsy 正在做所有工作来为每个输入类型设置支持状态字段，因此您不必这样做。

Answer 2

在您的情况下，事件的 target 是 <form> 并且输入是它的子项，因此为了访问它们的值，您需要获取子项。最简单的修复方法是 onSubmit 方法：

   onSubmit(e) {
     e.preventDefault();
     for (let i = 0; i < e.target.children.length; i++) {
            if (e.target.children[i].name === 'price') {
                console.log('value: ', e.target.children[i].value)
            }
     }
   }

JSFiddle with your code

Answer 3

试试这个

<!-- index.html -->
<div id="app"></app>

,

/* In index.jsx */
import React, {Component} from 'react';
import ReactDom from 'react-dom';

class BankForm extends Component {
  constructor() {
    super();
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(e) {
    e.preventDefault();

    // This will go through every item with name 'price' and get for you
    e.target.querySelectorAll('[name="price"]').forEach((e, i) => {
      console.log('Value of', i, 'th Item is:',  e.value);
    });

  }

  render() {
    return (
        <AddForm onSubmit={this.onSubmit}/>
    );
  }
}

function AddForm(props) {
  return (
      <div>
        <form onSubmit={props.onSubmit}>
          <input type="number" name="price"/>
          <input type="number" name="price"/>
          <button type="submit">Submit</button>
        </form>
      </div>
  );
}

ReactDom.render(<BankForm />, document.getElementById('app'));

输出是

Value of 0 th Item is: 2
Value of 1 th Item is: 3

如何在反应中将两个输入名称导入数组

How to import two input name into an array in react

reactjs

react-redux