арифметическое c вычисление в динамическом c входном массиве reactjs - PullRequest
Новая
       27

арифметическое c вычисление в динамическом c входном массиве reactjs

0 голосов
/ 05 апреля 2020

Я пытаюсь выполнить некоторую арифметическую c операцию в динамическом массиве ввода c. Пользователь может добавить любое поле ввода по своему усмотрению. Как, если первый индекс имеет 4 входа: длина, ширина, высота и объем ввода Я хочу динамически вычислять объем ввода в событии onchange путем умножения длины, ширины и высоты. Я также хочу суммировать все значения объема и поместить их в поле общего ввода. Вот что я сделал до сих пор. Нажав кнопку добавления это создаст 4 поля ввода для первого индекса 

 <button  onClick={this.handleAddShareholder}>Add</button>


<Grid item xs={12}>

    {this.state.shareholders.map((shareholder, idx) => (
 <input type="Number"  value={shareholder.itemLength} onChange={this.handleItemLength(idx)}/>
 <input type="Number" value={shareholder.itemWidth}onChange={this.handleItemWidth(idx)}/>
       <input type="Number" value={shareholder.area}/>
))}


</Grid>

<input type="Number" value={this.state.total}/>

, и это функция, которую я написал. Я получаю только значение для первого индекса, и если я добавляю другой вход, он показывает значение NAN для области ввод: 

handleAddShareholder = () => {
    this.setState({
        shareholders: this.state.shareholders.concat([{ itemLength:"",itemWidth:"",area:'' }])
    });
};




    handleItemLength = idx => evt => {
        const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
            if (idx !== sidx) return shareholder;
            console.log('state qty', evt.target.value)
            const qty= parseFloat(evt.target.value)

            return { ...shareholder, itemLength: evt.target.value,area:evt.target.value };

        });
        this.setState({ shareholders: newShareholders });
        console.log(this.state.shareholders)
    };

    handleItemWidth = idx => evt => {
        const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
            console.log("got item length before",shareholder.itemLength[idx])
            if (idx !== sidx) return shareholder;
            console.log("got item length",shareholder.itemLength[idx])
            console.log("got idx",idx)
            const qty= parseFloat(evt.target.value)* parseFloat(shareholder.itemLength[idx])
            return { ...shareholder, itemWidth: evt.target.value,area:qty };
        });
        this.setState({ shareholders: newShareholders });
        console.log(this.state.shareholders)
    };

Как я могу решить эту проблему?

...