我的输入组件按以下方式设置
constructor(props) {
super(props)
this.state = {text: ''}
}
componentWillReceiveProps(props) {
if(props.value) {
this.setState({text: props.value});
}
}
handleChange(event) {
event.persist();
this.setState({text: event.target.value});
if(typeof(this.props.onChange) === 'function') {
this.props.onChange(event);
}
}
render() {
return (
<input
onChange={ this.handleChange.bind(this) }
value={ this.state.text }
type="text"
placeholder={ this.props.placeholder }
className={ `form-text-input ${this.props.helpers}` }/>
);
}
我通过TextInput
(其类名)在其他组件中使用它,所以:
//Handle change
handleChange(event) {
this.setState({text: event.target.value})
console.log(this.state.text);
}
<TextInput
helpers="transparent seperator-text"
value={this.state.text}
onChange={this.handleChange.bind(this)} />
现在的问题是,当我输入'&#34; Hello,World&#34;我的控制台输出只会说&#34; Hello,Worl&#34;并且在每次输入内容时都缺少最后一个字符。我在改变时提交了这个文本,它提交了不完整的字符串,这真的很烦人。
如果我只是用标准输入
替换TextInput
,请注意没有任何变化
答案 0 :(得分:3)
在这种情况下帮助我的是发现setState有一个回调函数,即
this.setState({ someState: 'someState' }, () => {
//Anything you need to do after state update here
});
答案 1 :(得分:0)
您要做的是检查stateWillReceiveProps中是否需要更改状态。这来自https://github.com/calitek/ReactPatterns React.14.Common / FormInputs。
import React from 'react';
class JInputRender extends React.Component {
render() {
let inputSty = this.props.input.style ? this.props.input.style : {color: 'red'};
let textValue = this.state.textValue;
let colorValue = this.props.input.colorValue ? this.props.input.colorValue : '#1A3212';
let checkedValue = (this.props.input.checkedValue != null) ? this.props.input.checkedValue : false;
let numberValue = this.props.input.numberValue ? this.props.input.numberValue : 0;
let radioValue = this.props.input.radioValue ? this.props.input.radioValue : '';
let radioChecked = (this.props.input.radioChecked != null) ? this.props.input.radioChecked : false;
let min = this.props.input.min ? this.props.input.min : 0;
let max = this.props.input.max ? this.props.input.max : 100;
let step = this.props.input.step ? this.props.input.step : 1;
let inputType = this.props.input.type ? this.props.input.type : 'text';
let returnRadio = (
<input
ref="inputRef"
type={inputType}
style={inputSty}
checked={radioChecked}
value={radioValue}
onChange={this.handleValueChange} />
)
let returnChecked = (
<input
ref="inputRef"
type={inputType}
style={inputSty}
checked={checkedValue}
onChange={this.handleCheckedChange} />
)
let returnColor = (
<input
type={inputType}
ref="inputRef"
style={inputSty}
value={colorValue}
onChange={this.handleValueChange} />
)
let returnNumber = (
<input
type={inputType}
ref="inputRef"
style={inputSty}
value={numberValue}
min={min} max={max} step={step}
onChange={this.handleValueChange} />
)
let returnText = (
<input
type={inputType}
ref="inputRef"
style={inputSty}
value={textValue}
onChange={this.handleTextValueChange} />
)
let returnFile = (
<input
type={inputType}
ref="inputRef"
style={inputSty}
onChange={this.handleFolderChange}
multiple />
)
let returnIt = {};
switch (inputType) {
case 'checkbox': returnIt = returnChecked; break;
case 'radio': returnIt = returnRadio; break;
case 'color': returnIt = returnColor; break;
case 'number':
case 'range': returnIt = returnNumber; break;
case 'file': returnIt = returnFile; break;
default: returnIt = returnText; break;
}
return (returnIt);
}
}
export default class JInput extends JInputRender {
constructor(props) {
super();
this.state = {textValue: ''};
}
componentDidMount = () => {
if (this.props.input.textValue) this.setState({textValue: this.props.input.textValue});
if (this.props.input.focus) this.refs.inputRef.focus();
};
componentWillReceiveProps = (nextProps) => {
if (nextProps.input.textValue && (this.state.textValue != nextProps.input.textValue))
{this.setState({textValue: nextProps.input.textValue});}
};
handleCheckedChange = (event) => { this.props.handleChange(this.props.input.name, event.target.checked); };
handleTextValueChange = (event) => {
let newValue = event.target.value;
this.setState({textValue: newValue});
this.props.handleChange(this.props.input.name, newValue);
};
handleValueChange = (event) => { this.props.handleChange(this.props.input.name, event.target.value); };
handleFolderChange = (event) => { this.props.handleChange(this.props.input.name, event.target.value); };
}
这是调用组件。
import React from 'react';
import Actions from './../flux/Actions';
import JInput from './common/jInput';
import BasicStore from './../flux/Basic.Store';
let AppCtrlSty = {
height: '100%',
padding: '0 10px 0 0'
}
let checkBoxSty = {
boxSizing: 'border-box',
display: 'inline-block',
lineHeight: '18px',
marginLeft: '2px',
outline: 'none',
position: 'relative'
};
let radioSty = {color: "blue"}
let input3Sty = {color: 'green'};
let inputLabel = {margin: '0 5px'};
let textInput1 = {name: 'text', type: 'text', textValue: '', focus: true};
let checkInput1 = {name: 'checkbox', type: 'checkbox', style: checkBoxSty};
let colorInput = {name: 'color', type: 'color'};
let fileInput = {name: 'folder', type: 'file'};
let numberInput = {name: 'number', type: 'number', min: 0, max: 100};
let rangeInput = {name: 'range', type: 'range', min: 0, max: 100};
let radioInput1 = {name: 'radioGroup', type: 'radio', radioValue: 'set'};
let radioInput2 = {name: 'radioGroup', type: 'radio', radioValue: 'setkey'};
let radioInput3 = {name: 'radioGroup', type: 'radio', radioValue: 'key'};
class AppCtrlRender extends React.Component {
render() {
let inputData = this.state.data;
textInput1.textValue = inputData.text;
checkInput1.checkedValue = inputData.checkbox;
colorInput.colorValue = inputData.color;
numberInput.numberValue = inputData.number;
rangeInput.numberValue = inputData.range;
fileInput.folderValue = inputData.folder;
let currentRadioGroupValue = this.state.data.radioGroup;
radioInput1.radioChecked = (currentRadioGroupValue == radioInput1.radioValue);
radioInput2.radioChecked = (currentRadioGroupValue == radioInput2.radioValue);
radioInput3.radioChecked = (currentRadioGroupValue == radioInput3.radioValue);
let selected = inputData.checkbox ? 'true' : 'false';
let radioGroupName1 = 'key1'; //must be distinct for each use of JRadioGroup
let radioValue = inputData.radioGroup;
return (
<div id='AppCtrlSty' style={AppCtrlSty}>
React 0.14 Form input<br/><br/>
Text: <JInput input={textInput1} handleChange={this.handleValueChange} /><br/><br/>
Checkbox: <JInput input={checkInput1} handleChange={this.handleValueChange} /> Value: {selected}<br/><br/>
Color: <JInput input={colorInput} handleChange={this.handleValueChange} /> Value: {colorInput.colorValue}<br/><br/>
File: <JInput input={fileInput} handleChange={this.handleValueChange} /> Value: {fileInput.folderValue}<br/><br/>
Number: <JInput input={numberInput} handleChange={this.handleValueChange} /> Value: {numberInput.numberValue}<br/><br/>
Range: <JInput input={rangeInput} handleChange={this.handleValueChange} /> Value: {rangeInput.numberValue}<br/><br/>
Radio Input:
<JInput input={radioInput1} handleChange={this.handleValueChange} /> Set
<JInput input={radioInput2} handleChange={this.handleValueChange} /> Set/Key
<JInput input={radioInput3} handleChange={this.handleValueChange} /> Key
Value: {radioValue}
</div>
);
}
}
function getState() { return {data: BasicStore.getData()}; };
export default class AppCtrl extends AppCtrlRender {
constructor() {
super();
this.state = getState();
}
componentDidMount() { this.unsubscribe = BasicStore.listen(this.storeDidChange); };
componentWillUnmount() { this.unsubscribe(); };
storeDidChange = () => { this.setState(getState()); };
handleValueChange = (name, value) => { Actions.editRecord(name, value); };
}
答案 2 :(得分:0)
您可以使用另一个辅助变量来立即存储和使用该值。
constructor(props) {
super(props)
this.state = {text: ''};
this.text="";
}
componentWillReceiveProps(props) {
if(props.value) {
this.setState({text: props.value});
this.text = props.value;
}
}
handleChange(event) {
event.persist();
this.setState({text: event.target.value});
this.text = event.target.value;
if(typeof(this.props.onChange) === 'function') {
this.props.onChange(event);
}
}
render() {
return (
<input
onChange={ this.handleChange.bind(this) }
value={ this.state.text }
type="text"
placeholder={ this.props.placeholder }
className={ `form-text-input ${this.props.helpers}` }/>
);
}
//Handle change
handleChange(event) {
this.text = event.target.value;
this.setState({text: event.target.value})
console.log(this.state.text);
}
<TextInput
helpers="transparent seperator-text"
value={this.state.text}
onChange={this.handleChange.bind(this)} />
但总是应该使用this.state.text变量在UI中显示文本。