React inputテキストに文字を入力したら、送信ボタンの色を変えたい

Question

Reactでinputテキストが空白の時、送信ボタンはグレー色、文字を一文字以上入力したら、送信ボタンの色を青色に変えるに変えたい。

前提

Reactで簡単なTodoListを作成しています。
親コンポーネント：App.js
子コンポーネント：Input.js/TodoList.js/Button.js
で生成しています。

ソースコード

import { useState } from 'react';
import Button from "../components/Button";
import '../App.css';


const Input = ({taskList, setTaskList}) => {

  const [inputText, setInputText] = useState("");
  
  const handleSubmit = (e) => {
    e.preventDefault();

    if (inputText.length !== 0) {

      setTaskList([
        ...taskList,
        {
          id: taskList.length,
          text: inputText,
          completed: false
        }
      ]);
      console.log(taskList);
      setInputText('');
    }
  }

  const handleChange = (e) => {
    setInputText(e.target.value);
  }

  // 「追加」ボタン→入力前後でボタンの色を変えたい

  return (
    <div className='input'>
      <form onSubmit = {handleSubmit}>
        <input type='text' onChange={handleChange} value={inputText} />
        <Button changeColor={changeColor}  Push="追加"  marginLeft='20px'></Button>
        
      </form>
    </div>
  )
};

export default Input;

import styled from 'styled-components';


const StyleButton = styled.button ({
  border: 'none',
  borderRadius: '4px',
  fontFamily: 'ヒラギノ丸ゴ ProN',
  fontWeight: '400',
  fontSize: '14px',
  color: '#FFFFFF',
  width: '57px',
  height: '32px',
})



const Button = (props) => {
  const contentstyle ={
    backgroundColor: props.backgroundColor,
    marginLeft: props.marginLeft
  };
  


  return (
    <>
      <StyleButton onClick={props.eventClick} style={contentstyle}  >{props.Push}</StyleButton >
    </>
  )
};


export default Button;

補足情報ボールドテキスト

React初心者で、初めて投稿させていただきます。
宜しくお願い致します。

Answer 1

Buttonのprop backgroundColor を使うのであれば、Buttonを使うところの行を以下のように修正すればよいかと思います。

-        <Button changeColor={changeColor}  Push="追加"  marginLeft='20px'></Button>
+        <Button backgroundColor={inputText ? 'blue' : 'lightgray'} Push="追加" marginLeft='20px'></Button>

Comments

[anpanchi]

ご丁寧にありがとうございます！！
無事、入力時ボタンの色を変更することができました！
ありがとうございました！