質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

407閲覧

functional を用いたinput入力

naonao11

総合スコア97

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/02/23 19:27

functional componentを用いてフォームの作成を行なっているのですがワーニングが出てきます。
またその内容を解明すべく、検索をかけたのですがうまくいきませんでした。
以下その内容を書かせていただきます。

コード
inputField

js

1import React from 'react'; 2 3const TitleField = (props) => { 4 5 const handleCheckValue = (event) => { 6 const type = event.target.name; 7 const value = event.target.value; 8 props.onCheckValue(type, value, event); 9 } 10 console.log(this); 11 12 return( 13 <React.Fragment> 14 <label>Title</label> 15 <input type="text" name="title" 16 value={props.title} 17 onChange={handleCheckValue} 18 /> 19 </React.Fragment> 20 ); 21} 22 23export default TitleField;

form

js

1import React, { Component } from 'react'; 2import { Redirect } from 'react-router-dom'; 3import { withCookies, Cookies } from 'react-cookie'; 4import { instanceOf } from 'prop-types'; 5 6import TitleField from './form/TitleField'; 7import SubmitButton from './form/SubmitButton'; 8import ErrorMessage from '../components/ErrorMessage'; 9 10class editProduct extends Component{ 11 static propTypes = { 12 cookies: instanceOf(Cookies).isRequired 13 }; 14 15 constructor(props){ 16 super(props); 17 const {cookies} = props; 18 this.state = { 19 data: { 20 title: this.props.title, 21 description: this.props.description, 22 price: this.props.price 23 }, 24 token: cookies.get('token') || '', 25 errorMessages: [], 26 redirect: false 27 }; 28 29 this.checkValue = this.checkValue.bind(this); 30 this.handleSubmit = this.handleSubmit.bind(this); 31 } 32 33 checkValue(type, value){ 34 const data = { 35 title: this.state.data.title, 36 description: this.state.data.description, 37 price: this.state.data.price 38 }; 39 data[type] = value; 40 41 this.setState({data: data}); 42 } 43 44 componentDidMount(){ 45 this.handleFindById(this.props.match.params.id); 46 } 47 48 handleFindById(id){ 49 fetch('URL' + '/' + id, { 50 method: "GET", 51 headers:{ 52 "authorization" : this.state.token 53 } 54 }) 55 .then(response => { 56 response.json().then(data => { 57 this.setState({ 58 data: { 59 title: data.title, 60 description: data.description, 61 price: data.price 62 } 63 }) 64 }) 65 }) 66 } 67 68 handleSubmit(event){ 69 event.preventDefault(); 70 const {title, description, price} = this.state.data; 71 fetch('URL' + '/' + this.props.match.params.id, { 72 method: "PUT", 73 headers:{ 74 "Content-Type": "application/json", 75 "authorization" : this.state.token 76 }, 77 body: JSON.stringify({ 78 title: title, 79 description: description, 80 price: price 81 }) 82 }) 83 .then(response => { 84 if(response.status === 200){ 85 this.setState({redirect: true}); 86 }else if(response.status === 400){ 87 response.json().then(response => { 88 this.setState({errorMessages: response.errors}) 89 }) 90 }else{ 91 92 }; 93 }) 94 } 95 96 render(){ 97 if(this.state.redirect) { 98 return <Redirect to="/"/> 99 } 100 const { errorMessages } = this.state; 101 const errorElement = errorMessages.map((errorMessage) => { 102 return <ErrorMessage key={errorMessage.title} {...errorMessage} /> 103 }); 104 const {title, description, price} = this.state.data; 105 return( 106 <React.Fragment> 107 <h2>Edit Product</h2> 108 <form> 109 <TitleField onCheckValue={this.checkValue.bind(this)} title={title}/> 110 <SubmitButton onSubmit={this.handleSubmit.bind(this)}/> 111 {errorMessages.length !== 0 && ( 112 errorElement 113 )} 114 </form> 115 </React.Fragment> 116 ); 117 } 118 119} 120export default withCookies(editProduct);

ERROR

index.js:1446 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components in input (at TitleField.js:15) in TitleField (at EditProduct.js:113)

ご助力よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ご質問でのTitleFieldでは、React側でcontrolledかuncontrolledのどちらか判別が困難になってるものと存じます。
こちらの記事がControlledとUncontrolledの使い方に触れてますので、ご参照ください。
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
(エラーメッセージ内にある https://fb.me/react-controlled-components からもこの記事に飛べます)

解決策としては、handleCheckValueの処理をeditProductの中に含められることができ、この場合inputを “controlled”として利用できそうです。
例: https://codepen.io/engineer_jp_us/pen/bZbwbQ?editors=0010
頂いたコードを簡易化したものになります。

投稿2019/02/24 21:26

engineer_jp_us

総合スコア100

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naonao11

2019/02/24 22:01

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問