問題点
onClickイベントでinputのvalueを取得し、stateを更新したいが、onClickイベントが発火しない
実際のコード
export default class SeartchInput extends React.Component { constructor(props) { super(props); this.state = { textValue: 'ini' }; } changeText(e) { console.log('called') console.log(this.state.textValue) this.setState({textValue: this.refs.inputText.value}) this.refs.inputText.value = '' } render() { return ( <Wrapper> <Flex justify="center"> <Input width="150px" height="25px" placeholder="キーワード検索..." type="text" ref="inputText" /> {this.state.textValue} <SearchBtn type="submit" onClick={() => this.changeText()} /> </Flex> </Wrapper> ) } }
試したこと
とりあえずイベントが発火しているか試すために、
onClick={() => alert('clicked')}
なども試しましたが、動いていませんでした。
また、input内でonChengeを試しましたが、そちらも発火しませんでした。
SearchBtn.js.jsx
1import styled, { css } from "styled-components"; 2import React from 'react' 3 4import { BtnIcon } from '../Atoms/Icon.js.jsx' 5import { Text } from '../Utils/Text.js' 6import { Flex } from '../Utils/Flex.js' 7 8import Color from '../const/Color.js' 9import Size from '../const/Size.js' 10 11export class SearchBtn extends React.Component { 12 render () { 13 return ( 14 <Wrapper> 15 <Flex hs="100%" align="center" justify="center"> 16 <BtnIcon url="SEARCH" type /> 17 </Flex> 18 </Wrapper> 19 ) 20 } 21} 22...略... 23 24const Wrapper = styled.div` 25 height: 14px 26 width: 30px; 27 padding: 5px; 28 background-color: ${ Color.MAIN }; 29 border: 1px solid ${ Color.MAIN_SHADOW }; 30 cursor: pointer; 31 border-radius: 4px; 32 border-bottom: 3px solid ${ Color.MAIN_SHADOW }; 33 34 &:active { 35 transform: translateY(2px); 36 border-bottom: 1px solid ${ Color.SUB1 }; 37 } 38` 39...略...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/10 07:46
2019/06/10 08:13
2019/06/10 08:58
2019/06/10 10:06
2019/06/10 11:08
2019/06/10 11:11