如何动态更改输入值? [英] How to change the value of input dynamically?
问题描述
我有一个动态输入，可以在其中添加和删除带有输入的行，还有用于时间选择器的material-ui输入，当我单击该输入时，将带有带有时钟图标的输入.但是此输入的值不能随时钟改变.
I have a dynamic inputs, which I can add and delete a row with inputs, there are inputs of material-ui for timepicker, which having an input with her icon of a clock when I click on it the clock will appear. but the values of this input cannot change with the clock.
我的代码是:
import { TimePicker } from "material-ui-time-picker";
import {
Input as Time,
Dialog as Clock,
DialogActions,
Button as ButtonOk
} from "@material-ui/core";
constructor(props) {
super(props);
this.state = {
isOpenS: false,
isOpenE: false,
start: moment().format("HH:MM"),
end: moment().format("HH:MM"),
tranches: [
{ start: moment().format("HH:MM"), end: moment().format("HH:MM") }
]
};
this.ajouterTranche = this.ajouterTranche.bind(this);
this.supprimerTranche = this.supprimerTranche.bind(this);
this.handleKeyboardStartChange = this.handleKeyboardStartChange.bind(this);
}
openDialogS = () => this.setState({ isOpenS: true });
closeDialogS = () => this.setState({ isOpenS: false });
backdropClickS = () => this.setState({ isOpenS: false });
handleDialogStartChange = (i, newValue) => {
const hours = newValue
.getHours()
.toString()
.padStart(2, "0");
const minutes = newValue
.getMinutes()
.toString()
.padStart(2, "0");
const textValue = hours + ":" + minutes;
// this.setState({ start: textValue });
this.state.tranches[i] = Object.assign({}, this.state.tranches[i], {
start: textValue
});
this.setState({
tranches: this.state.tranches
});
};
handleKeyboardStartChange = (i, event) => {
const rowDataCopy = this.state.tranches.slice(0);
rowDataCopy[i] = Object.assign({}, rowDataCopy[i], {
start: event.target.value
});
this.setState({
tranches: rowDataCopy
});
};
createDateFromTextValue = (i, value) => {
const splitParts = value.split(":");
return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
};
openDialogE = () => this.setState({ isOpenE: true });
closeDialogE = () => this.setState({ isOpenE: false });
handleDialogEndChange = newValue => {
const hours = newValue
.getHours()
.toString()
.padStart(2, "0");
const minutes = newValue
.getMinutes()
.toString()
.padStart(2, "0");
const textValue = hours + ":" + minutes;
this.setState({ end: textValue });
};
handleKeyboardEndChange = (i, event) => {
// On va copier le tableau de tranches
const rowDataCopy = this.state.tranches.slice(0);
// On va jouter cette valeur changée au tableau de tranches
rowDataCopy[i] = Object.assign({}, rowDataCopy[i], {
end: event.target.value
});
this.setState({
tranches: rowDataCopy
});
};
createDateFromTextValue = value => {
const splitParts = value.split(":");
return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
};
ajouterTranche = () => {
this.setState(prevState => ({
tranches: [...prevState.tranches, ""]
}));
};
supprimerTranche = idx => () => {
const rowDataCopy = this.state.tranches.slice(0);
rowDataCopy.splice(1, 1);
this.setState({
tranches: rowDataCopy
});
};
render() {
console.log(this.state.start);
return (
<div>
{this.state.tranches.map((el, i) => (
<Row key={i}>
<Col span={12} />
<Col span={12}>
<Row>
<Col span={8}>
<label className="pt-label .modifier">
<strong>Heure de début</strong>
</label>
<br />
<Time
value={el.start}
onChange={time => this.handleKeyboardStartChange(i, time)}
style={heure}
disableUnderline={true}
inputComponent={TextMaskCustom}
endAdornment={
<InputAdornment position="end" style={{ opacity: "0.4" }}>
<IconButton onClick={this.openDialogS}>
<AccessTime />
</IconButton>
</InputAdornment>
}
/>
<Clock
maxWidth="xs"
open={this.state.isOpenS}
onBackdropClick={this.closeDialogS}
>
<TimePicker
mode="24h"
value={this.createDateFromTextValue(this.state.start)}
onChange={time => this.handleDialogStartChange(i, time)}
/>
<DialogActions>
<ButtonOk onClick={this.closeDialogS} color="primary">
Ok
</ButtonOk>
</DialogActions>
</Clock>
<br />
</Col>
<Col span={8}>
<label className="pt-label .modifier">
<strong>Heure de fin</strong>
</label>
<br />
<Time
value={el.end}
onChange={time => this.handleKeyboardEndChange(i, time)}
style={heure}
disableUnderline={true}
inputComponent={TextMaskCustom}
endAdornment={
<InputAdornment position="end" style={{ opacity: "0.4" }}>
<IconButton onClick={this.openDialogS}>
<AccessTime />
</IconButton>
</InputAdornment>
}
/>
<Clock
maxWidth="xs"
open={this.state.isOpenE}
onBackdropClick={this.closeDialogE}
>
<TimePicker
mode="24h"
value={this.createDateFromTextValue(this.state.end)}
onChange={this.handleDialogEndChange}
/>
<DialogActions>
<ButtonOk onClick={this.closeDialogE} color="primary">
Ok
</ButtonOk>
</DialogActions>
</Clock>
<br />
</Col>
<Col span={8}>
{i === 0 ? (
<>
<br />
<Icon
type="plus-circle"
theme="twoTone"
twoToneColor="#52c41a"
onClick={this.ajouterTranche}
/>
<br />
</>
) : (
<>
<Icon
type="close-circle"
theme="twoTone"
twoToneColor="red"
onClick={this.supprimerTranche(i)}
/>
<Icon
type="plus-circle"
theme="twoTone"
twoToneColor="#52c41a"
onClick={this.ajouterTranche}
/>
<br />
</>
)}
</Col>
</Row>
</Col>
</Row>
))}
</div>
);
}
}
我的沙盒代码为: https://codesandbox.io/s/182oy5995l
当我在输入上输入一个值并单击时钟时，得到的是时钟的力矩值，而不是输入到输入上的值. 我想要从时钟更改时间时，输入将更改，反之亦然.
When I put a value on the input and I click on the clock, I get the moment value of the clock and not the value which I put on the input. I want when I change the time from the clock, the input will be change and vice versa.
我该如何解决?
推荐答案
我将把您放在正确的轨道上.我认为，如果您能做到这一点，便可以迅速解决其余问题.不过，我真的不知道您打算从头到尾做什么.因此，我所做的仅适用于时间选择器，您可以使用它再次修复键盘问题.
I'm going to set you on the right track. I think if you get this, you'll be able to quickly fix the rest of the problems. I don't really know what you're trying to do with the start and end though. So what I've done will only work on the timepicker and you can use this to fix the keyboard thing again.
这是我的分叉版本
https://codesandbox.io/s/2xm39130kn
Here is my forked version
https://codesandbox.io/s/2xm39130kn
当您使用多个对象调用handleDialogStartChange时，您不能只修改一个状态.除非他们都应该共享同一时间.这似乎毫无意义.
When you call handleDialogStartChange with multiple objects, you can't just modify one state. Unless they're all supposed to share the same time. That seems pointless.
我将您的timepicker onChange函数修改为onChange={time => this.handleDialogStartChange(i, time)}，因此您也可以推送索引，以便知道要使用哪个索引.
I modified your timepicker onChange function to onChange={time => this.handleDialogStartChange(i, time)} so you can push the index as well so you know which one you want to work with.
我将您的时间选择器值函数修改为value={this.createDateFromTextValue(el.start)}，因此您引用的是单个元素，而不是原始状态变量.
I modified your timepicker value function to value={this.createDateFromTextValue(el.start)} so you're referencing the individual element, not the original state variable.
然后在andleDialogStartChange中使用该索引修改存储这些时间的付款的状态.您会得到警告，不要像这样修改状态，但是只要您将其与setState this.setState({ tranches: this.state.tranches });结合使用，这是合法操作.
Then in andleDialogStartChange modify the the state of the tranches where you're storing these times, using that index. You'll get a warning not to modify state like this, but so long as you're using it in conjunction with setState, this.setState({ tranches: this.state.tranches });, it's a legal operation.
handleDialogStartChange = (i, newValue) => {
const hours = newValue
.getHours()
.toString()
.padStart(2, "0");
const minutes = newValue
.getMinutes()
.toString()
.padStart(2, "0");
const textValue = hours + ":" + minutes;
this.state.tranches[i].start = textValue;
this.state.tranches[i].end = textValue;
this.setState({ tranches: this.state.tranches });
this.setState({ start: textValue });
};
这篇关于如何动态更改输入值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
