Реагируй материалом-интерфейсом TextField с добавлением чисел

Question

Как добавить два числовых поля формы вместе?.

Ниже приведены два компонента - Userform и FormUserDetails. Пользовательская форма вводится как простой компонент в app.js. Я предполагаю, что это я не понимаю, где поставить функцию AdditionTest в реакцию. Кроме того, я хотел бы иметь форму по умолчанию в виде строки и при первом взаимодействии преобразовать ее в числа. Это единственный способ не иметь предварительно набранный 0 в числовых формах? Или это какой-то другой способ указать начальное состояние UserForm как числа без фактического ввода числа ?. Кстати, жесткое кодирование чисел в исходное состояние поле суммы работает, как и предполагалось. Наконец, почему id = "standard-read-only-input" не работает с material-ui в этом коде? Заранее спасибо

---

import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import TextField from 'material-ui/TextField';

       render() {
            const { values, handleChange } = this.props;
            function AdditionTest(Num1,Num2){
                Number(Num1);
                Number(Num2);
                return (Num1+Num2);
            }
            return (
               <MuiThemeProvider>
                   <React.Fragment>
                       <AppBar title="Income" />
                       <TextField 
                       hintText="Income One"
                       type="number"
                       step="100"
                       floatingLabelText="Income One"
                       onChange={handleChange('incomeOne')}
                       defaultValue={values.incomeOne}
                       />
                       <br/>
                       <TextField 
                       hintText="income Two"
                       type="number"
                       step="100"
                       floatingLabelText="income Two"
                       onChange={handleChange('incomeTwo')}
                       defaultValue={values.incomeTwo}
                       />
                        <br/>
                       <TextField 
                        id="standard-read-only-input"
                       hintText=""
                       floatingLabelText=""
                       onChange={handleChange('sum')}
                      defaultValue={AdditionTest(values.incomeOne,values.incomeTwo)}      
                       />

                   </React.Fragment>
               </MuiThemeProvider>
            )
        }
    }



    export default FormUserDetails

    -----------------------------------------------------------
    import React, { Component } from 'react'
    import FormUserDetails from './FormUserDetails';

    export class UserForm extends Component {
        state = {
            incomeOne: 0,
            incomeTwo: 0,
            sum: '',
            occupation: '',
            city: '',
            bio: ''
        };

          // Handle fields change
        handleChange = input => e => {
            this.setState({[input]: e.target.value});
        }


        render() {

            const { incomeOne, incomeTwo, sum, occupation, city, bio } = this.state;
            const values = {incomeOne, incomeTwo, sum, occupation, city, bio }

                    return (
                        <FormUserDetails 
                        handleChange={this.handleChange}
                        values={values}
                        />
                    )
        }
    }

    export default UserForm