react

```react
import React, { useState } from 'react';
import A from './A';
import B from './B';

function App() {
  const [inputValue, setInputValue] = useState<string>('');

  const handleInputChange = (value: string) => {
    setInputValue(value);
  };

  return (
    <div>
      <h1>React App</h1>
      <A onInputChange={handleInputChange} />
      <B inputValue={inputValue} />
    </div>
  );
}

export default App;






import React, { useState } from 'react';

interface AProps {
  onInputChange: (value: string) => void;
}

const A: React.FC<AProps> = ({ onInputChange }) => {
  const [text, setText] = useState<string>('');

  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setText(value);
    onInputChange(value);
  };

  return (
    <div>
      <h2>Component A</h2>
      <input
        type="text"
        value={text}
        onChange={handleInput}
        placeholder="Type something..."
      />
    </div>
  );
};

export default A;










import React from 'react';

interface BProps {
  inputValue: string;
}

const B: React.FC<BProps> = ({ inputValue }) => {
  return (
    <div>
      <h2>Component B</h2>
      <p>Received input in B: {inputValue}</p>
    </div>
  );
};

export default B;













import React, { useState } from 'react';
import A from './A';
import B from './B';

function App() {
  const [inputValue, setInputValue] = useState<string>('');

  const handleInputChange = (value: string) => {
    setInputValue(value);
  };

  return (
    <div>
      <h1>React App</h1>
      <A onInputChange={handleInputChange} />
      <B inputValue={inputValue} />
    </div>
  );
}

export default App;
A.tsx:

tsx
Copy code
import React, { useState } from 'react';

interface AProps {
  onInputChange: (value: string) => void;
}

const A: React.FC<AProps> = ({ onInputChange }) => {
  const [text, setText] = useState<string>('');

  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setText(value);
  };

  const handleButtonClick = () => {
    onInputChange(text);
  };

  return (
    <div>
      <h2>Component A</h2>
      <input
        type="text"
        value={text}
        onChange={handleInput}
        placeholder="Type something..."
      />
      <button onClick={handleButtonClick}>Send to B</button>
    </div>
  );
};

export default A;
B.tsx:

tsx
Copy code
import React from 'react';

interface BProps {
  inputValue: string;
}

const B: React.FC<BProps> = ({ inputValue }) => {
  return (
    <div>
      <h2>Component B</h2>
      <p>Received input in B: {inputValue}</p>
    </div>
  );
};

export default B;


























import React, { useState } from 'react';
import A from './A';
import B from './B';

function App() {
  const [textValue, setTextValue] = useState<string>('');
  const [selectValue, setSelectValue] = useState<string>('');

  const handleTextChange = (value: string) => {
    setTextValue(value);
  };

  const handleSelectChange = (value: string) => {
    setSelectValue(value);
  };

  return (
    <div>
      <h1>React App</h1>
      <A onTextChange={handleTextChange} onSelectChange={handleSelectChange} />
      <B textValue={textValue} selectValue={selectValue} />
    </div>
  );
}

export default App;


import React, { useState } from 'react';

interface AProps {
  onTextChange: (textValue: string) => void;
  onSelectChange: (selectValue: string) => void;
}

const A: React.FC<AProps> = ({ onTextChange, onSelectChange }) => {
  const [text, setText] = useState<string>('');
  const [selectedOption, setSelectedOption] = useState<string>('');

  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setText(value);
    onTextChange(value);
  };

  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const value = event.target.value;
    setSelectedOption(value);
    onSelectChange(value);
  };

  return (
    <div>
      <h2>Component A</h2>
      <input
        type="text"
        value={text}
        onChange={handleTextChange}
        placeholder="Type something..."
      />
      <select value={selectedOption} onChange={handleSelectChange}>
        <option value="">Select an option</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <button>Send to B</button>
    </div>
  );
};

export default A;





import React from 'react';

interface BProps {
  textValue: string;
  selectValue: string;
}

const B: React.FC<BProps> = ({ textValue, selectValue }) => {
  return (
    <div>
      <h2>Component B</h2>
      <p>Received text input in B: {textValue}</p>
      <p>Received selected option in B: {selectValue}</p>
    </div>
  );
};

export default B;




```



このコードでは、Aコンポーネントで入力されたテキストがAppコンポーネントを介してBコンポーネントに渡されます。AppコンポーネントでhandleInputChange関数を使用してAからBにテキストを渡します。

各コンポーネントは独自のPropsを持ち、TypeScriptを使用して型情報を提供しています。 Aコンポーネントでの入力変更はonInputChange関数を介してAppコンポーネントに通知され、そしてBコンポーネントはその値を受け取ります。