This question already has answers here:
Is there a float input type in HTML5?
(14 answers)
Closed 5 years ago.
I need a simple input box to be a floating point number (anything with a . really). As it is right now, it doesn't allow me to put the dot and do a floating point. Should be simple but I can't find much on this.
Here is roughly the current code:
class MyComponent extends React.Component {
render () {
return (
<td>
<label> Value: </label>
<input
type='number'
min='0'
max='20'
className='form-control'
value={this.state.value}
onChange= {(evt) => this.onValueChange('value', evt.target.value)}
/>
</td>
)
}
}
The number type has a step value controlling which numbers precision which defaults to 1.
You can use this to set the floating point precision
<input type="number" step="0.1">
You will have
class MyComponent extends React.Component {
render () {
return (
<td>
<label> Value: </label>
<input
type='number'
step="0.1"
min='0'
max='20'
className='form-control'
value={this.state.value}
onChange= {(evt) => this.onValueChange('value', evt.target.value)}
/>
</td>
)
}
}
Related
This question already has answers here:
CSS selector to match elements by attribute's name start
(2 answers)
Closed 1 year ago.
For example I have these attributes in my html file <input type="number" data-input-primary-people /> and <input type="number" data-input-primary-amount /> how to select these starting with data-input-primary-
You can use spread operator and filter like this:
var res = [...document.querySelectorAll("*")].filter(t => [...t.attributes].filter(({ name}) => name.startsWith("data-input-primary-")).length > 0)
console.log(res);
<input type="number" data-input-primary-people" />
<input type="number" data-input-primary-amount" />
<input type="number" data-input-primary1-amount" />
Inside a Vue-component, I'm making a list, but the number of entries in the list varies.
So it could be like this:
<form>
<input type="number" value="15" />
<input type="number" value="10" />
<input type="number" value="5" />
<input name="total" :value="summedTotal" /> <!-- (calculated dynamically) -->
</form>
Or like this:
<form>
<input type="number" value="15" />
<input type="number" value="10" />
<input type="number" value="5" />
<input type="number" value="17" />
<input type="number" value="20" />
<input name="total" :value="summedTotal" /> <!-- (calculated dynamically) -->
</form>
If I had a fixed set of input fields, then I would have solved it using v-model. But now the number of 'models' are dynamic.
Can I somehow still use v-model to solve this?
Currently I'm adding an #keypress-event, finding the input ( document.getElementById( '....' ) and finding the value from that. But I need to set a delay for it to work. I could use keyup or some other event-watcher, but it all becomes really hacky, really quick.
The actual code is (an advanced version of) this:
<form>
<input
type="number"
v-for="(entry, index) in list"
name="entry.id"
value="entry.initial_value"
:id="'entry-id__' + entry.id" #keypress="calculateSum()"
/>
<input name="total" :value="summedTotal" /> <!-- (calculated dynamically) -->
</form>
You should be able to use a v-model that will allow your input fields to change the value in the list :
<input
type="number"
v-for="(entry, index) in list"
:key="'input-field-'+entry.id"
name="entry.id"
v-model="entry.initial_value"
:id="'entry-id__' + entry.id"
/>
When a new value is set by the user, it should modify this precise value in your list object.
Then keep your last line as is:
<input name="total" :value="summedTotal" />
with summedTotal being a computed value summing the values of your list.
If you don't want to change your original list, you can make a deep copy first and then use copiedList for your v-model:
data {
copiedList : JSON.parse(JSON.stringify(this.list))
}
Here is a Snippet that works:
new Vue({
el: '#app',
data: {
list: [{
id: 1,
initial_value: 3
},
{
id: 2,
initial_value: 1
},
{
id: 3,
initial_value: 7
},
{
id: 4,
initial_value: 2
},
]
},
computed: {
summedValued() {
return this.list.reduce((acc, c) => {
return acc + parseInt(c.initial_value || 0);
}, 0)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(entry, index) in list" :key="'input-field-'+entry.id">
ID {{entry.id}}: <input type="number" name="entry.id" v-model="entry.initial_value" :id="'entry-id__' + entry.id" />
</div>
TOTAL :{{summedValued}}
</div>
I was doing a 45 day coding with ReactJS challenge am on day 2 and I have encountered a slight issue ,
I was wondering how I could render the Marketcap without the need to click submit button onto to the page and also the form space
import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
class App extends Component{
constructor(){
super()
this.state= {
StockName:"",
StockPrice:"",
Volume:"",
MarketCap:""
}
this.handleChange=this.handleChange.bind(this)
this.Calculate=this.Calculate.bind(this)
}
handleChange(event){
const{name,value}=event.target
this.setState({
[name]:value
})
}
Calculate(event){
alert('$Market Cap is calculated')
}
render(){
return(
<main>
<h1>Enter Company Details Below</h1>
<form >
<input
class="form-control form-control-lg"
value= {this.state.StockName}
onChange ={this.handleChange}
name ="StockName"
placeholder="Stock" /><br />
<input
class="form-control form-control-sm"
value= {this.state.StockPrice}
onChange ={this.handleChange}
name="StockPrice"
placeholder="$ Stock Price" /><br />
<input
class="form-control form-control-sm"
value= {this.state.Volume}
onChange ={this.handleChange}
name="Volume"
placeholder="Shares Outstanding" />
<br />
<input
class="form-control form-control-sm"
value= {this.state.MarketCap}
onChange ={this.handleChange}
name="MarketCap"
placeholder="$ Market Cap" />
<br />
<button onClick={this.Calculate}>Calculate</button>
</form>
<br/>
Company: <h1>{this.state.StockName}</h1>
SharePrice: <p>${this.state.StockPrice}</p>
Shares Outstanding : <p>{this.state.Volume}</p>
Market Cap: <p>${this.state.MarketCap}</p>
</main>
)
}
}
export default App
I'm not quite sure what you mean by rendering MarketCap, but if the point is to update it with every change you can trigger the calculate method from the change method. Example: https://codesandbox.io/embed/345yr934x5
I'm trying to use ternary to display checked if number are equal to i + 1 in react
<input className="inc" type="radio" id={ i } ({ number } === ({i}+1)) ? checked : ''}/>
but I get unexpected token on the first bracket of ({ number }
I'm doing this to get get <input className="inc" type="radio" id={ i } checked /> when is condition is true and <input className="inc" type="radio" id={ i } /> when false
You need to use the ternary as the value for the checked prop instead of trying to add/remove the prop:
<input className="inc" type="radio" id={i} checked={number === i+1}/>
I am working with 4 radio buttons where I need to take the 2 options selected by the user and send it to a socket, but first, I need to know how to update the options selected using an action and a store
here the code where you can see the buttons
class BetBehindModal extends Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<div>
<p>Bet Behind Settings</p>
<p>When seated player Doubles:</p>
<form>
<input type="radio" value="double" name="doubles" /> Always Double my bet <br />
<input type="radio" value="nodouble" name="doubles" /> Never Double my bet
<p>When seated player Splits:</p>
<input type="radio" value="split" name="splits" /> Always Split <br />
<input type="radio" value="nosplit" name="splits" /> Assign bet to 1st hand
</form>
<hr />
<button className="toggleModalBtn" type="submit" onClick={this._confirm}>Confirm</button>
</div>
</div>
);
}
}
export default BetBehindModal;
so, there are 4 options, the user has the right to choose 2 of those 4. I need to send that info to a socket and also to a backend made in Nodejs, but the most important part is, how to work with this with the action and the store?
As far as I understand the question, you having a hard time trying to update the state of your component based on the radio buttons. As a way to do it, you may add onChange handler:
class BetBehindModal extends Component {
constructor (props) {
super(props);
this.onDoublesChange = this.onDoublesChange.bind(this);
this.onSplitsChange = this.onSplitsChange.bind(this);
}
render () {
return (
<div>
<div>
<p>Bet Behind Settings</p>
<p>When seated player Doubles:</p>
<form>
<input type="radio" value="double" name="doubles" onChange={this.onDoublesChange}/> Always Double my bet <br />
<input type="radio" value="nodouble" name="doubles" onChange={this.onDoublesChange}/> Never Double my bet
<p>When seated player Splits:</p>
<input type="radio" value="split" name="splits" onChange={this.onSplitsChange}/> Always Split <br />
<input type="radio" value="nosplit" name="splits" onChange={this.onSplitsChange}/> Assign bet to 1st hand
</form>
<hr />
<button className="toggleModalBtn" type="submit" onClick={this._confirm}>Confirm</button>
</div>
</div>
);
}
onDoublesChange({ target }) {
if (target.checked) this.setState({ doubles: target.value });
}
onSplitsChange({ target }) {
if (target.checked) this.setState({ splits: target.value });
}
}
export default BetBehindModal;