如何導入兩個輸入名稱到一個數組中的反應

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 。價格值）;

我嘗試了：

的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你可以玩。我知道，如果你有很大的表格，這看起來像很多工作，但有一個我喜歡的庫，這使得這個非常簡單，稱爲formsy。

Formsy通過使用mixins並允許您構建可複用的表單組件（如文本框，組合框等）來包裝所有這些工作。將它們放置在窗體表單組件中，並且在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