Reactjs AJAX数据无法触发React onChange
我正在开发一个ZipCode组件，它有3个字段：邮政编码、城市和州。该组件应具有2个功能（请参见图片）： 1.如果用户已经有位置数据（从数据库中提取并由其父组件传递），则应该显示默认位置值 2.如果用户输入新的邮政编码，它将触发另一个第三方API调用，以获取城市和州信息，并自动填写这两个字段 现在的问题是，当我在一个地方填充邮政编码字段时，它将自动填充所有其他组件中的城市、州。我发现，这可能是因为从第三方API获取新位置数据时无法触发onChange函数。它只能通过键入一些信息来触发 下面是我的一些代码：Reactjs AJAX数据无法触发React onChange,reactjs,Reactjs,我正在开发一个ZipCode组件，它有3个字段：邮政编码、城市和州。该组件应具有2个功能（请参见图片）： 1.如果用户已经有位置数据（从数据库中提取并由其父组件传递），则应该显示默认位置值 2.如果用户输入新的邮政编码，它将触发另一个第三方API调用，以获取城市和州信息，并自动填写这两个字段 现在的问题是，当我在一个地方填充邮政编码字段时，它将自动填充所有其他组件中的城市、州。我发现，这可能是因为从第三方API获取新位置数据时无法触发onChange函数。它只能通过键入一些信息来触发 下面是我的
19: class ZipCode extends Component {
20: constructor(props) {
21: super(props);
22: this.state = {
23: zipCode: props.zipCode || '',
24: city: props.city || '',
25: state: props.state || '',
26: newZipCode: '',
27: newCity: '',
28: newState: '',
29: showError: false,
30: };
31:
32: this.handleZipChange = this.handleZipChange.bind(this);
33: this.handleCityChange = this.handleCityChange.bind(this);
34: this.handleStateChange = this.handleStateChange.bind(this);
35: }
36:
37: componentWillReceiveProps(nextProps) {
38: const { city, state, zipCode } = nextProps.zipCodeData;
39: // zipCodeData from state:
40: // const initialState = fromJS({
41: // zipCodeData: {
42: // zipCode: '',
43: // city: '',
44: // state: '',
45: // },
46: // });
47: this.setState({
48: zipCode: this.props.zipCode,
49: state: this.props.state,
50: city: this.props.city,
51: newCity: city,
52: newZipCode: zipCode,
53: newState: state,
54: });
55: }
56:
57: shouldComponentUpdate(nextProps, nextState) {
58: return !_.isEqual(nextProps.zipCodeData, this.props.zipCodeData) || !_.isEqual(nextState, this.state);
59: }
60:
61:
62: handleZipChange(zipCode) {
63: const { dispatchZipCode } = this.props;
64: console.log('handleZipChange ZipCode', zipCode);
65: this.setState({
66: newZipCode: zipCode,
67: zipCode: '',
68: showError: true,
69: }, () => {
70: if (zipCode.length === 5) {
71: this.setState({
72: showError: false,
73: });
74: dispatchZipCode({ zipCode });
75: }
76: });
77: }
78:
79: handleCityChange(newCity) {
80: console.log(newCity); // not working unless typing
81: this.setState({
82: ...this.state,
83: newCity,
84: });
85: }
86:
87: handleStateChange(e) {
88: console.log(e); // not working unless typing
89: }
90:
91: render() {
92: const { isRequired, notPublicDisclaimer, direction } = this.props;
93: const { zipCode, city, state, newZipCode, newCity, newState, showError } = this.state;
94:
95: return (
96: <Zc direction={direction}>
97: <Zc.column>
98: <Zc.input
99: title={translations.ZIPCODE}
100: notPublicDisclaimer={notPublicDisclaimer}
101: isRequired={isRequired}
102: placeholder={'01234'}
103: showLabel
104: value={newZipCode || zipCode}
105: limit={5}
106: handleOnTextChange={this.handleZipChange}
107: direction={direction}
108: showError={showError}
109: />
110: <Zc.error>
111: { showError && <ErrorText text={'Please enter a valid Zip Code'} /> }
112: </Zc.error>
113: </Zc.column>
114: <Zc.wrapper>
115: <Zc.formFieldCity>
116: <Zc.label direction={direction}>{translations.CITY}</Zc.label>
117: {/* I use material design, but if changed to <input> and onChange, it will be the same */}
118: <Zc.input
119: placeholder={translations.CITY}
120: value={newCity || city}
121: readOnly
122: direction={direction}
123: handleOnTextChange={this.handleCityChange}
124: />
125: </Zc.formFieldCity>
126: <Zc.formFieldState>
127: <Zc.label direction={direction}>{translations.STATE}</Zc.label>
128: <Zc.inputDisabled
129: placeholder={translations.STATE}
130: value={newState || state}
131: readOnly
132: direction={direction}
133: onChange={this.handleStateChange}
134: />
135: </Zc.formFieldState>
136: </Zc.wrapper>
137: </Zc>
138: );
139: }
140: }
19:类ZipCode扩展组件{
20：建造师（道具）{
21：超级（道具）；
22:this.state={
23:zipCode:props.zipCode | |“，
24：城市：道具。城市，
25:state:props.state | |“，
26:新ZipCode:“”，
27：新城：，
28:newState:“”，
29:Ror:false，
30: };
31:
32:this.handleZipChange=this.handleZipChange.bind（this）；
33:this.handleCityChange=this.handleCityChange.bind（this）；
34:this.handleStateChange=this.handleStateChange.bind（this）；
35: }
36:
37：组件将接收道具（下一步）{
38:const{city，state，zipCode}=nextProps.zipCodeData；
39://zipCodeData来自州：
40://const initialState=fromJS({
41://zipCodeData:{
42://zipCode:“”，
43://城市：''，
44://州：''，
45: // },
46: // });
47:这是我的国家({
48:zipCode:this.props.zipCode，
49：状态：this.props.state，
50:city:this.props.city，
51：新城：城市，
52:newZipCode:zipCode，
53:newState:state，
54: });
55: }
56:
57:shouldComponentUpdate（下一步，下一步状态）{
58:return！.isEqual（nextrops.zipCodeData，this.props.zipCodeData）| |！.isEqual（nextState，this.state）；
59: }
60:
61:
62:handleZipChange（zipCode）{
63:const{dispatchZipCode}=this.props；
64:console.log（'handleZipChange-ZipCode'，ZipCode'）；
65:这是我的国家({
66:newZipCode:zipCode，
67:zipCode:“”，
68:没错，
69: }, () => {
70:if（zipCode.length==5）{
71：这是我的国家({
72:Ror:false，
73: });
74:dispatchZipCode（{zipCode}）；
75: }
76: });
77: }
78:
79：handleCityChange（新城）{
80:console.log（newCity）；//除非键入，否则无法工作
81：这是我的国家({
82:…这个州，
83：纽约，
84: });
85: }
86:
87：手动变速箱（e）{
88:console.log（e）；//除非键入，否则不工作
89: }
90:
91:render（）{
92:const{isRequired，notpublicsdisclaimer，direction}=this.props；
93:const{zipCode，city，state，newZipCode，newCity，newState，showError}=this.state；
94:
95：返回(
96:
97:
98:
110:
111:{showError&&}
112:
113:
114:
115:
116:{翻译。城市}
117:{/*我使用材质设计，但如果更改为和onChange，则将是相同的*/}
118:
125:
126:
127:{translations.STATE}
128:
135:
136:
137:
138: );
139: }
140: }